Documentation | Unify - Multipurpose Template + UI KIT

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>

          
            <!-- 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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </div>
              </div>

              <!-- Arrows -->
              <div class="js-swiper-navigation-button-next swiper-button-next"></div>
              <div class="js-swiper-navigation-button-prev swiper-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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </div>
              </div>

              <!-- Arrows -->
              <div class="js-swiper-pagination-progress-button-next swiper-button-next"></div>
              <div class="js-swiper-pagination-progress-button-prev swiper-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.

Discover how to build and maintain coding systems using our documentation.

Start browsing our snippets pages with copy-to-clipboard snippets to match Bootstrap's level of quality.

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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </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>Discover how to build and maintain coding systems using our documentation.</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>Start browsing our snippets pages with copy-to-clipboard snippets to match Bootstrap's level of quality.</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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </div>
              </div>

              <!-- Arrows -->
              <div class="js-swiper-pagination-fraction-button-next swiper-button-next"></div>
              <div class="js-swiper-pagination-fraction-button-prev swiper-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%.

Learn more 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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide" style="width: 60%">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide" style="width: 30%">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide" style="width: 50%">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide" style="width: 20%">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide" style="width: 60%">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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>

Responsive 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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide" style="width: 60%">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide" style="width: 30%">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide" style="width: 50%">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide" style="width: 20%">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide" style="width: 60%">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </div>
              </div>

              <!-- Arrows -->
              <div class="js-swiper-effect-fade-button-next swiper-button-next"></div>
              <div class="js-swiper-effect-fade-button-prev swiper-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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </div>
              </div>

              <!-- Arrows -->
              <div class="js-swiper-mousewheel-button-next swiper-button-next"></div>
              <div class="js-swiper-mousewheel-button-prev swiper-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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </div>
              </div>

              <!-- Arrows -->
              <div class="js-swiper-autoplay-button-next swiper-button-next"></div>
              <div class="js-swiper-autoplay-button-prev swiper-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 Space 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 Space 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 Space 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 Space 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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3.jpg" alt="Image Description">
                </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="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img2-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img3-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img4-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img5-lg.jpg" alt="Image Description">
                </div>
                <div class="swiper-slide">
                  <img class="img-fluid" src="/assets/img/documentation/img6-lg.jpg" alt="Image Description">
                </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>

Swiper

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

Responsive Breakpoint

Centered

Centered Auto

Freemode

Infinite Loop

Effect Mode

Mousewheel

Autoplay

Equal Height

Auto Height

Thumbs Gallery

Preloader