Swiper

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

        
          <link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script>
            (function() {
              // INITIALIZATION OF SWIPER
              // =======================================================
              var swiper = new Swiper('.swiper');
            });
          </script>

Default

预览
HTML

              
                <!-- Swiper -->
                <div class="js-swiper swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>
                </div>
                <!-- End Swiper -->

              
                <!-- Swiper -->
                <div class="js-swiper-navigation swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-navigation-button-next"></div>
                  <div class="js-swiper-navigation-button-prev"></div>
                </div>
                <!-- End Swiper -->

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var navigation = new Swiper('.js-swiper-navigation', {
                      navigation: {
                        nextEl: '.js-swiper-navigation-button-next',
                        prevEl: '.js-swiper-navigation-button-prev',
                      },
                    });
                  })()
                </script>

Pagination

              
                <!-- Swiper -->
                <div class="js-swiper-pagination swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-pagination-element swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var navigation = new Swiper('.js-swiper-pagination', {
                      pagination: {
                        el: '.js-swiper-pagination',
                      },
                    });
                  })()
                </script>

Use .swiper-pagination-light class for lighter style

Pagination Dynamic

              
                <!-- Swiper -->
                <div class="js-swiper-pagination-dynamic swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-pagination-dynamic-element swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var paginationDynamic = new Swiper('.js-swiper-pagination-dynamic', {
                      pagination: {
                        el: '.js-swiper-pagination-dynamic-element',
                        dynamicBullets: true,
                      },
                    });
                  })()
                </script>

Pagination Progress

              
                <!-- Swiper -->
                <div class="js-swiper-pagination-progress swiper">
                  <!-- Swiper Pagination -->
                  <div class="js-swiper-pagination-progress-element swiper-pagination mt-0"></div>

                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-pagination-progress-button-next"></div>
                  <div class="js-swiper-pagination-progress-button-prev"></div>
                </div>
                <!-- End Swiper -->

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var paginationProgress = new Swiper('.js-swiper-pagination-progress', {
                      pagination: {
                        el: '.js-swiper-pagination-progress-element',
                        type: 'progressbar',
                      },
                      navigation: {
                        nextEl: '.js-swiper-pagination-progress-button-next',
                        prevEl: '.js-swiper-pagination-progress-button-prev',
                      },
                    });
                  })()
                </script>

Pagination Progress with Thumbs

.swiper-pagination-progress-light for light version.

了解如何使用我们的文档构建和维护编码系统

开始浏览我们的代码片段页面与你可以在这里将代码复制到你的页面中，保持代码的一致性。同时所有的代码片段匹配Boostrap的样式和代码风格。

Apart from 70+ HTML-pages, the theme comes with 3 ready-to-use and stand-alone demo options.

              
                <!-- Swiper Main -->
                <div class="js-swiper-pagination-progress-with-thumbs-main swiper mb-5">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>
                </div>
                <!-- End Swiper Main -->

                <!-- Swiper Thumbs -->
                <div class="js-swiper-pagination-progress-with-thumbs swiper">
                  <div class="swiper-wrapper">
                    <!-- Slide -->
                    <div class="swiper-slide swiper-pagination-progress">
                      <div class="swiper-pagination-progress-body mb-4">
                        <div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
                      </div>
                      <span>了解如何使用我们的文档构建和维护编码系统</span>
                    </div>
                    <!-- End Slide -->

                    <!-- Slide -->
                    <div class="swiper-slide swiper-pagination-progress">
                      <div class="swiper-pagination-progress-body mb-4">
                        <div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
                      </div>
                      <span>开始浏览我们的代码片段页面与你可以在这里将代码复制到你的页面中，保持代码的一致性。同时所有的代码片段匹配Boostrap的样式和代码风格。</span>
                    </div>
                    <!-- End Slide -->

                    <!-- Slide -->
                    <div class="swiper-slide swiper-pagination-progress">
                      <div class="swiper-pagination-progress-body mb-4">
                        <div class="js-swiper-pagination-progress-body-helper swiper-pagination-progress-body-helper"></div>
                      </div>
                      <span>Apart from 70+ HTML-pages, the theme comes with 3 ready-to-use and stand-alone demo options.</span>
                    </div>
                    <!-- End Slide -->
                  </div>
                </div>
                <!-- End Swiper Thumbs -->

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var paginationProgressWithThumbsThumbs = new Swiper('.js-swiper-pagination-progress-with-thumbs', {
                      watchSlidesVisibility: true,
                      watchSlidesProgress: true,
                      history: false,
                      breakpoints: {
                        480: {
                          slidesPerView: 2,
                          spaceBetween: 15,
                        },
                        768: {
                          slidesPerView: 3,
                          spaceBetween: 15,
                        },
                        1024: {
                          slidesPerView: 3,
                          spaceBetween: 15,
                        },
                      },
                      on: {
                        'afterInit': function (swiper) {
                          swiper.el.querySelectorAll('.js-swiper-pagination-progress-body-helper')
                          .forEach($progress => $progress.style.transitionDuration = `${swiper.params.autoplay.delay}ms`)
                        }
                      }
                    });

                    var paginationProgressWithThumbsMain = new Swiper('.js-swiper-pagination-progress-with-thumbs-main', {
                      effect: 'fade',
                      autoplay: true,
                      loop: true,
                      thumbs: {
                        swiper: paginationProgressWithThumbsThumbs
                      }
                    })
                  })()
                </script>

Pagination Fraction

              
                <!-- Swiper -->
                <div class="js-swiper-pagination-fraction swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-pagination-fraction-button-next"></div>
                  <div class="js-swiper-pagination-fraction-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-pagination-fraction-element swiper-pagination swiper-pagination-fraction"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var paginationProgress = new Swiper('.js-swiper-pagination-fraction', {
                      pagination: {
                        el: '.js-swiper-pagination-fraction-element',
                        type: 'fraction',
                      },
                      navigation: {
                        nextEl: '.js-swiper-pagination-fraction-button-next',
                        prevEl: '.js-swiper-pagination-fraction-button-prev',
                      },
                    });
                  })()
                </script>

Vertical

Any vertical sliding need to rely on your element must have a valid height of such conditions, if it is full-screen sliding, this height should be 100%.

了解更多 here

              
                <!-- Swiper -->
                <div class="js-swiper-vertical swiper" style="height: 37rem;">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>
                  
                  <!-- Swiper Pagination -->
                  <div class="js-swiper-vertical-pagination swiper-pagination swiper-pagination-light"></div>
                </div>
                <!-- End Swiper -->

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var vertical = new Swiper('.js-swiper-vertical', {
                      direction: 'vertical',
                      pagination: {
                        el: '.js-swiper-vertical-pagination',
                        clickable: true,
                      },
                    });
                  })()
                </script>

Space Between

              
                <!-- Swiper -->
                <div class="js-swiper-space-between swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-space-between-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var spaceBetween = new Swiper('.js-swiper-space-between', {
                      spaceBetween: 30,
                      pagination: {
                        el: '.js-swiper-space-between-pagination',
                        clickable: true,
                      },
                    });
                  })()
                </script>

Slides Per View

              
                <!-- Swiper -->
                <div class="js-swiper-slides-per-view swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-slides-per-view-button-next swiper-button-next"></div>
                  <div class="js-swiper-slides-per-view-button-prev swiper-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-slides-per-view-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var slidesPerView = new Swiper('.js-swiper-slides-per-view', {
                      slidesPerView: 3,
                      spaceBetween: 30,
                      pagination: {
                        el: '.js-swiper-slides-per-view-pagination',
                        clickable: true,
                      },
                      navigation: {
                        nextEl: '.js-swiper-slides-per-view-button-next',
                        prevEl: '.js-swiper-slides-per-view-button-prev',
                      },
                    });
                  })()
                </script>

Slides Per View Auto

              
                <!-- Swiper -->
                <div class="js-swiper-slides-per-view-auto swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" style="width: 60%">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 60%">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 30%">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 50%">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 20%">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 60%">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-slides-per-view-auto-button-next swiper-button-next"></div>
                  <div class="js-swiper-slides-per-view-auto-button-prev swiper-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-slides-per-view-auto-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var slidesPerView = new Swiper('.js-swiper-slides-per-view-auto', {
                      slidesPerView: 3,
                      spaceBetween: 30,
                      pagination: {
                        el: '.js-swiper-slides-per-view-auto-pagination',
                        clickable: true,
                      },
                    });
                  })()
                </script>

响应式 Breakpoint

              
                <!-- Swiper -->
                <div class="js-swiper-responsive-breakpoint swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-responsive-breakpoint-button-next swiper-button-next"></div>
                  <div class="js-swiper-responsive-breakpoint-button-prev swiper-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-responsive-breakpoint-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var responsiveBreakpoint = new Swiper('.js-swiper-responsive-breakpoint', {
                      slidesPerView: 1,
                      spaceBetween: 10,
                      pagination: {
                        el: '.js-swiper-responsive-breakpoint-pagination',
                        clickable: true,
                      },
                      breakpoints: {
                        640: {
                          slidesPerView: 2,
                          spaceBetween: 20,
                        },
                        768: {
                          slidesPerView: 2,
                          spaceBetween: 40,
                        },
                        1024: {
                          slidesPerView: 3,
                          spaceBetween: 50,
                        },
                      }
                    });
                  })()
                </script>

Centered

              
                <!-- Swiper -->
                <div class="js-swiper-centered swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-centered-button-next swiper-button-next"></div>
                  <div class="js-swiper-centered-button-prev swiper-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-centered-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var centered = new Swiper('.js-swiper-centered', {
                      slidesPerView: 4,
                      spaceBetween: 30,
                      centeredSlides: true,
                      pagination: {
                        el: '.js-swiper-centered-pagination',
                        clickable: true,
                      },
                    });
                  })()
                </script>

Centered Auto

              
                <!-- Swiper -->
                <div class="js-swiper-centered-auto swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" style="width: 60%">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 60%">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 30%">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 50%">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 20%">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide" style="width: 60%">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-centered-auto-button-next swiper-button-next"></div>
                  <div class="js-swiper-centered-auto-button-prev swiper-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-centered-auto-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var centeredAuto = new Swiper('.js-swiper-centered-auto', {
                      slidesPerView: 'auto',
                      centeredSlides: true,
                      spaceBetween: 30,
                      pagination: {
                        el: '.js-swiper-centered-auto-pagination',
                        clickable: true,
                      },
                    });
                  })()
                </script>

Freemode

              
                <!-- Swiper -->
                <div class="js-swiper-freemode swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-freemode-button-next swiper-button-next"></div>
                  <div class="js-swiper-freemode-button-prev swiper-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-freemode-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var freemode = new Swiper('.js-swiper-freemode', {
                      slidesPerView: 3,
                      spaceBetween: 30,
                      freeMode: true,
                      pagination: {
                        el: '.js-swiper-freemode-pagination',
                        clickable: true,
                      },
                    });
                  })()
                </script>

Infinite Loop

              
                <!-- Swiper -->
                <div class="js-swiper-infinite-loop swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-infinite-loop-button-next"></div>
                  <div class="js-swiper-infinite-loop-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-infinite-loop-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var infiniteLoop = new Swiper('.js-swiper-infinite-loop', {
                      slidesPerView: 1,
                      spaceBetween: 30,
                      loop: true,
                      pagination: {
                        el: '.js-swiper-infinite-loop-pagination',
                        clickable: true,
                      },
                      navigation: {
                        nextEl: '.js-swiper-infinite-loop-button-next',
                        prevEl: '.js-swiper-infinite-loop-button-prev',
                      },
                    });
                  })()
                </script>

Effect Mode

              
                <!-- Swiper -->
                <div class="js-swiper-effect-fade swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-effect-fade-button-next"></div>
                  <div class="js-swiper-effect-fade-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-effect-fade-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var effectFade = new Swiper('.js-swiper-effect-fade', {
                      spaceBetween: 30,
                      effect: 'fade',
                      pagination: {
                        el: '.js-swiper-effect-fade-pagination',
                        clickable: true,
                      },
                      navigation: {
                        nextEl: '.js-swiper-effect-fade-button-next',
                        prevEl: '.js-swiper-effect-fade-button-prev',
                      },
                    });
                  })()
                </script>

Mousewheel

              
                <!-- Swiper -->
                <div class="js-swiper-mousewheel swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-mousewheel-button-next"></div>
                  <div class="js-swiper-mousewheel-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-mousewheel-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var mousewheel = new Swiper('.js-swiper-mousewheel', {
                      slidesPerView: 1,
                      spaceBetween: 30,
                      mousewheel: true,
                      pagination: {
                        el: '.js-swiper-mousewheel-pagination',
                        clickable: true,
                      },
                      navigation: {
                        nextEl: '.js-swiper-mousewheel-button-next',
                        prevEl: '.js-swiper-mousewheel-button-prev',
                      },
                    });
                  })()
                </script>

Autoplay

              
                <!-- Swiper -->
                <div class="js-swiper-autoplay swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-autoplay-button-next"></div>
                  <div class="js-swiper-autoplay-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-autoplay-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var autoplay = new Swiper('.js-swiper-autoplay', {
                      spaceBetween: 30,
                      centeredSlides: true,
                      autoplay: {
                        delay: 2500,
                        disableOnInteraction: false,
                      },
                      pagination: {
                        el: '.js-swiper-autoplay-pagination',
                        clickable: true,
                      },
                      navigation: {
                        nextEl: '.js-swiper-autoplay-button-next',
                        prevEl: '.js-swiper-autoplay-button-prev',
                      },
                    });
                  })()
                </script>

Equal Height

“ This is a beautiful template with exciting components and endless features. ”

“ I plan to use Front in many more projects, and almost want to keep it to myself ”

“ Great design and thorough documentation, all backed with amazing support. ”

“ It has many landing page variations to choose from, which one is always a big advantage. ”

“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”

“ This is a beautiful template with exciting components and endless features. ”

              
                <!-- Swiper -->
                <div class="js-swiper-equal-height swiper swiper-equal-height">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ I plan to use Front in many more projects, and almost want to keep it to myself ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ Great design and thorough documentation, all backed with amazing support. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote blockquote-sm">“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-equal-height-button-next swiper-button-next"></div>
                  <div class="js-swiper-equal-height-button-prev swiper-button-prev"></div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-equal-height-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var equalHeight = new Swiper('.js-swiper-equal-height', {
                      pagination: {
                        el: '.js-swiper-equal-height-pagination',
                        clickable: true,
                      },
                      breakpoints: {
                        580: {
                          slidesPerView: 1,
                          spaceBetween: 15,
                        },
                        768: {
                          slidesPerView: 2,
                          spaceBetween: 15,
                        },
                        1024: {
                          slidesPerView: 3,
                          spaceBetween: 15,
                        },
                      }
                    });
                  })()
                </script>

Auto Height

“ This is a beautiful template with exciting components and endless features. ”

“ I plan to use Front in many more projects, and almost want to keep it to myself ”

“ Great design and thorough documentation, all backed with amazing support. ”

“ It has many landing page variations to choose from, which one is always a big advantage. ”

“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”

“ This is a beautiful template with exciting components and endless features. ”

              
                <!-- Swiper -->
                <div class="js-swiper-auto-height swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ I plan to use Front in many more projects, and almost want to keep it to myself ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ Great design and thorough documentation, all backed with amazing support. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote blockquote-sm">“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>

                    <div class="swiper-slide">
                      <div class="swiper-slide">
                        <!-- Card -->
                        <div class="card bg-soft-primary-light shadow-none">
                          <div class="card-body">
                            <blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-auto-height-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var autoHeight = new Swiper('.js-swiper-auto-height', {
                      autoHeight: true, //enable auto height
                      spaceBetween: 20,
                      pagination: {
                        el: '.js-swiper-auto-height-pagination',
                        clickable: true,
                      },
                    });
                  })()
                </script>

Thumbs Gallery

              
                <!-- Swiper Main -->
                <div class="js-swiper-gallery-main swiper mb-2">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-gallery-button-next swiper-button-next"></div>
                  <div class="js-swiper-gallery-button-prev swiper-button-prev"></div>
                </div>
                <!-- End Swiper Main -->

                <!-- Swiper Thumbs -->
                <div class="js-swiper-gallery-thumbs swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3.jpg" alt="图片描述内容">
                    </div>
                  </div>
                </div>
                <!-- End Swiper Thumbs -->

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var galleryThumbs = new Swiper('.js-swiper-gallery-thumbs', {
                      spaceBetween: 10,
                      slidesPerView: 3,
                      freeMode: true,
                      watchSlidesVisibility: true,
                      watchSlidesProgress: true,
                    });

                    var galleryTop = new Swiper('.js-swiper-gallery-main', {
                      spaceBetween: 10,
                      navigation: {
                        nextEl: '.js-swiper-gallery-button-next',
                        prevEl: '.js-swiper-gallery-button-prev',
                      },
                      thumbs: {
                        swiper: galleryThumbs
                      }
                    });
                  })()
                </script>

Preloader

              
                <!-- Swiper -->
                <div class="js-swiper-preloader swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img1-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img2-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img3-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img4-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img5-lg.jpg" alt="图片描述内容">
                    </div>
                    <div class="swiper-slide">
                      <img class="img-fluid" src="../assets/img/documentation/img6-lg.jpg" alt="图片描述内容">
                    </div>
                  </div>

                  <!-- Arrows -->
                  <div class="js-swiper-preloader-button-next swiper-button-next"></div>
                  <div class="js-swiper-preloader-button-prev swiper-button-prev"></div>

                  <!-- Preloader -->
                  <div class="js-swiper-preloader swiper-preloader">
                    <div class="spinner-border text-primary" role="status">
                      <span class="visually-hidden">Loading...</span>
                    </div>
                  </div>
                  <!-- End Preloader -->
                </div>
                <!-- End Swiper -->
                
                <!-- Swiper Pagination -->
                <div class="js-swiper-preloader-pagination swiper-pagination"></div>

              
                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var preloader = new Swiper('.js-swiper-preloader', {
                      slidesPerView: 3,
                      spaceBetween: 30,
                      pagination: {
                        el: '.js-swiper-preloader-pagination',
                        clickable: true,
                      },
                      navigation: {
                        nextEl: '.js-swiper-preloader-button-next',
                        prevEl: '.js-swiper-preloader-button-prev',
                      },
                      on: {
                        'imagesReady': function (swiper) {
                          const preloader = swiper.el.querySelector('.js-swiper-preloader')
                          preloader.parentNode.removeChild(preloader)
                        }
                      }
                    });
                  })()
                </script>

How to use

Default

Navigation

Pagination

Pagination Dynamic

Pagination Progress

Pagination Progress with Thumbs

Pagination Fraction

Vertical

Space Between

Slides Per View

Slides Per View Auto

响应式 Breakpoint

Centered

Centered Auto

Freemode

Infinite Loop

Effect Mode

Mousewheel

Autoplay

Equal Height

Auto Height

Thumbs Gallery

Preloader