Framework7 Default Swiper With Pagination

by Online Tutorials Library July 14, 2022

Default Swiper with Pagination Example

Let’s take an example to demonstrate the use of default swiper with pagination 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>Default Swiper with Pagination</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”>Default Swiper</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’           });        </script>     </body>    </html>  

Test it Now

Next TopicFramework7 Lazy Loading

Framework7 Default Swiper With Pagination

Default Swiper with Pagination Example

Income tax calculating formula in Excel

Framework7 Inline Tabs

You may also like