Framework7 With Space Between Slides

by Online Tutorials Library July 14, 2022

With Space Between Slides

It is used to give space between two slides. Let’s take an example to demonstrate the use of space between slides in Framework7:

  <!DOCTYPE html>  <html>       <head>        <meta name = “viewport” content = “width = device-width, initial-scale = 1,            maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui” />        <meta name = “apple-mobile-web-app-capable” content = “yes” />        <meta name = “apple-mobile-web-app-status-bar-style” content = “black” />        <title>With space between slides</title>        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css” />        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css” />     </head>       <body>        <div class = “views”>           <div class = “view view-main”>              <div class = “pages”>                 <div data-page = “home” class = “page navbar-fixed”>                                        <div class = “navbar”>                       <div class = “navbar-inner”>                          <div class = “left”> </div>                          <div class = “center”>Space Between Slides</div>                          <div class = “right”> </div>                       </div>                    </div>                                        <div class = “page-content”>                       <div class = “swiper-container”>                          <div class = “swiper-wrapper”>                             <div class = “swiper-slide”><span>Slide 1</span></div>                             <div class = “swiper-slide”><span>Slide 2</span></div>                             <div class = “swiper-slide”><span>Slide 3</span></div>                             <div class = “swiper-slide”><span>Slide 4</span></div>                          </div>                          <div class = “swiper-pagination”></div>                       </div>                    </div>                                     </div>              </div>           </div>        </div>                <script type = “text/javascript”            src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script>                   <style>           .swiper-container {              height:100%;           }                      .swiper-slide {              background:#fff;           }                      .swiper-slide span {              text-align:center;              display:block;              margin:20px;              font-size:21px;           }        </style>                <script>           var myApp = new Framework7();             var mySwiper = myApp.swiper(‘.swiper-container’, {              pagination:’.swiper-pagination’,              spaceBetween: 100           });        </script>     </body>    </html>  

Test it Now

Next TopicFramework7 Photo Browser

Framework7 With Space Between Slides

With Space Between Slides

AdMob with Firebase

Godot Tutorial

You may also like