Getting Started With Swiper

There are few options on how to include/import Swiper into your project:

Documentation for Swiper
How to use?

Copy-paste the following <link> near the end of your pages under Nayzak Plugins CSS to enable it.

                
                  <link href="assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" media="all">

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

                
                  <script src="assets/plugins/swiper/swiper-bundle.min.js"></script>
Add Swiper HTML Layout

Now, we need to add basic Swiper layout to our app:

                
                  <!-- Slider main container -->
                  <div class="swiper">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                      <!-- Slides -->
                      <div class="swiper-slide">Slide 1</div>
                      <div class="swiper-slide">Slide 2</div>
                      <div class="swiper-slide">Slide 3</div>
                      ...
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    <!-- If we need scrollbar -->
                    <div class="swiper-scrollbar"></div>
                  </div>
Initialize Swiper

Finally, we need to initialize Swiper in JS:

                
                  // Swiper Slider Script
                  <script>
                    var sliderSelector = '.swiper', defaultOptions = {
                      breakpointsInverse: true,
                      observer: true
                    };
                    var nSlider = document.querySelectorAll(sliderSelector);
                    [].forEach.call(nSlider, function(slider, index, arr) {
                      var data = slider.getAttribute('data-swiper') || {};
                      if (data) {
                        var dataOptions = JSON.parse(data);
                      }
                      slider.options = Object.assign({}, defaultOptions, dataOptions);
                      var swiper = new Swiper(slider, slider.options);
                      console.log(slider.options.autoplay)
                      if (typeof slider.options.autoplay !== 'undefined' && slider.options.autoplay !== false) {
                        slider.addEventListener('mouseenter', function(e) {
                          swiper.autoplay.stop();
                          console.log('stop')
                        });
                        slider.addEventListener('mouseleave', function(e) {
                          swiper.autoplay.start();
                          console.log('start')
                        });
                      }
                    });
                  </script>

                  //Swiper Destroyed Slider Script
                  <script>
                    const breakpoint = window.matchMedia('(min-width:768px)');
                    let mySwiper;
                    const breakpointChecker = function() {
                      if(breakpoint.matches === true) {
                        if(mySwiper !== undefined) mySwiper.destroy(true, true);
                        return;
                      }
                      else if (breakpoint.matches === false) {
                        return enableSwiper();
                      }
                    };
                    const enableSwiper = function() {
                    var sliderSelector = '[data-distorted]', defaultOptions = {
                      breakpointsInverse: true,
                      observer: true
                    };
                    var nSlider = document.querySelectorAll(sliderSelector);
                    [].forEach.call(nSlider, function(slider, index, arr) {
                      var data = slider.getAttribute('data-swiper') || {};
                      if (data) {
                        var dataOptions = JSON.parse(data);
                      }
                      slider.options = Object.assign({}, defaultOptions, dataOptions);
                      var swiper = new Swiper(slider, slider.options);
                      console.log(slider.options.autoplay)
                      if (typeof slider.options.autoplay !== 'undefined' && slider.options.autoplay !== false) {
                        slider.addEventListener('mouseenter', function(e) {
                          swiper.autoplay.stop();
                          console.log('stop')
                        });
                        slider.addEventListener('mouseleave', function(e) {
                          swiper.autoplay.start();
                          console.log('start')
                        });
                      }
                    });
                    };
                    breakpoint.addListener(breakpointChecker);
                    breakpointChecker();
                  </script>

Testimonial Card

Testomonials
“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”
Nayzak
Mike Portnoy
Head of Design — Nike
Testomonials
“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”
Nayzak
Mike Portnoy
Head of Design — Nike
Testomonials
“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”
Nayzak
Mike Portnoy
Head of Design — Nike 
              
                <div class="card testimonial-card bg-white shadow border-0 rounded-24 p-lg-5" data-aos="fade-up" data-aos-delay="50"
                  data-aos-duration="800">
                  <div class="card-body text-dark p-3">
                    <div class="px-2 px-md-3 p-3">
                      <div class="row">
                        <div class="col-md-9 col-xl-10 mx-auto">
                          <div class="swiper"
                            data-swiper='{"initialSlide": 0, "slidesPerView": 1, "centeredSlides": false, "autoplay": {"delay": 2000}, "speed": 1000, "spaceBetween": 30, "pagination": {"el": ".swiper-pagination", "clickable": true},"navigation": {"nextEl": ".swiper-button-next","prevEl": ".swiper-button-prev", "clickable": true} }'>
                            <div class="swiper-wrapper">
                              <div class="swiper-slide">
                                <h6 class="mb-3">Testomonials</h6>
                                <h5 class="mb-md-0">“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”</h5>
                                <div class="d-flex align-items-center pt-5">
                                  <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar1.png" class="rounded-circle" width="80" height="80" alt="Nayzak">
                                  <div class="ps-3">
                                    <h6 class="mb-1">Mike Portnoy</h6>
                                    <span class="fs-5">Head of Design — Nike</span>
                                  </div>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <h6 class="mb-3">Testomonials</h6>
                                <h5 class="mb-md-0">“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”</h5>
                                <div class="d-flex align-items-center pt-5">
                                  <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar1.png" class="rounded-circle" width="80" height="80" alt="Nayzak">
                                  <div class="ps-3">
                                    <h6 class="mb-1">Mike Portnoy</h6>
                                    <span class="fs-5">Head of Design — Nike</span>
                                  </div>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <h6 class="mb-3">Testomonials</h6>
                                <h5 class="mb-md-0">“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”</h5>
                                <div class="d-flex align-items-center pt-5">
                                  <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar1.png" class="rounded-circle" width="80" height="80" alt="Nayzak">
                                  <div class="ps-3">
                                    <h6 class="mb-1">Mike Portnoy</h6>
                                    <span class="fs-5">Head of Design — Nike</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="swiper-pagination d-block d-md-none mt-4 pt-2"></div>
                          </div>
                          <div class="swiper-navigation d-md-block d-none">
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

Primary Testimonial Card

Testomonials
“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”
Nayzak
Mike Portnoy
Head of Design — Nike
Testomonials
“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”
Nayzak
Mike Portnoy
Head of Design — Nike
Testomonials
“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”
Nayzak
Mike Portnoy
Head of Design — Nike 
              
                <div class="card testimonial-card bg-primary-70 shadow border-0 rounded-24 p-lg-5">
                  <div class="card-body text-white p-3">
                    <div class="px-2 px-md-3 p-3">
                      <div class="row">
                        <div class="col-md-9 col-xl-10 mx-auto">
                          <div class="swiper"
                            data-swiper='{"initialSlide": 0, "slidesPerView": 1, "centeredSlides": false, "autoplay": {"delay": 2000}, "speed": 1000, "spaceBetween": 30, "pagination": {"el": ".swiper-pagination", "clickable": true},"navigation": {"nextEl": ".swiper-button-next","prevEl": ".swiper-button-prev", "clickable": true} }'>
                            <div class="swiper-wrapper">
                              <div class="swiper-slide">
                                <h6 class="mb-3">Testomonials</h6>
                                <h5 class="mb-0">“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”</h5>
                                <div class="d-flex align-items-center pt-5">
                                  <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar1.png" class="rounded-circle" width="80" height="80" alt="Nayzak">
                                  <div class="ps-3">
                                    <h6 class="mb-1">Mike Portnoy</h6>
                                    <span class="fs-5">Head of Design — Nike</span>
                                  </div>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <h6 class="mb-3">Testomonials</h6>
                                <h5 class="mb-0">“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”</h5>
                                <div class="d-flex align-items-center pt-5">
                                  <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar1.png" class="rounded-circle" width="80" height="80" alt="Nayzak">
                                  <div class="ps-3">
                                    <h6 class="mb-1">Mike Portnoy</h6>
                                    <span class="fs-5">Head of Design — Nike</span>
                                  </div>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <h6 class="mb-3">Testomonials</h6>
                                <h5 class="mb-0">“With Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new ideas and feel more capable.”</h5>
                                <div class="d-flex align-items-center pt-5">
                                  <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar1.png" class="rounded-circle" width="80" height="80" alt="Nayzak">
                                  <div class="ps-3">
                                    <h6 class="mb-1">Mike Portnoy</h6>
                                    <span class="fs-5">Head of Design — Nike</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="swiper-pagination d-block d-md-none mt-4 pt-2"></div>
                          </div>
                          <div class="swiper-navigation d-md-block d-none">
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

Dark Testimonial Card

“Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id est enime aliquip ex ea comm cupidat non proident.”

Nayzak
Gabe Oswald
Lead Designers @Nike

“Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id est enime aliquip ex ea comm cupidat non proident.”

Nayzak
Gabe Oswald
Lead Designers @Nike

“Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id est enime aliquip ex ea comm cupidat non proident.”

Nayzak
Gabe Oswald
Lead Designers @Nike 
              
                <div class="card bg-brand-2 border-0 rounded-24 p-4 p-md-5 text-white">
                  <div class="card-body px-0 py-2 p-md-2">
                    <div class="swiper"
                      data-swiper='{"initialSlide": 0, "slidesPerView": 1, "centeredSlides": false, "autoplay": {"delay": 2000}, "speed": 1000, "spaceBetween": 30, "pagination": {"el": ".swiper-pagination", "clickable": true},"navigation": {"nextEl": ".swiper-button-next","prevEl": ".swiper-button-prev", "clickable": true} }'>
                      <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <p class="fw-semibold pb-md-3">“Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id est enime aliquip ex ea comm cupidat non proident.”</p>
                          <div class="d-flex align-items-center pt-4 pt-md-5">
                            <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar2.png" class="rounded-circle" width="60" height="60" alt="Nayzak">
                            <div class="ps-3">
                              <h6 class="mb-1">Gabe Oswald</h6>
                              <span class="fs-5">Lead Designers @Nike</span>
                            </div>
                          </div>
                        </div>
                        <div class="swiper-slide">
                          <p class="fw-semibold pb-md-3">“Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id est enime aliquip ex ea comm cupidat non proident.”</p>
                          <div class="d-flex align-items-center pt-4 pt-md-5">
                            <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar2.png" class="rounded-circle" width="60" height="60" alt="Nayzak">
                            <div class="ps-3">
                              <h6 class="mb-1">Gabe Oswald</h6>
                              <span class="fs-5">Lead Designers @Nike</span>
                            </div>
                          </div>
                        </div>
                        <div class="swiper-slide">
                          <p class="fw-semibold pb-md-3">“Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id est enime aliquip ex ea comm cupidat non proident.”</p>
                          <div class="d-flex align-items-center pt-4 pt-md-5">
                            <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar2.png" class="rounded-circle" width="60" height="60" alt="Nayzak">
                            <div class="ps-3">
                              <h6 class="mb-1">Gabe Oswald</h6>
                              <span class="fs-5">Lead Designers @Nike</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="swiper-pagination d-block d-md-none mt-4 pt-2"></div>
                    </div>
                  </div>
                </div>

Light Testimonial Card

Nayzak
Nayzak
Gabe Oswald
Lead Designers @Nike

Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id.

Nayzak
Nayzak
Gabe Oswald
Lead Designers @Nike

Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id.

Nayzak
Nayzak
Gabe Oswald
Lead Designers @Nike

Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id.

              
                <div class="card bg-white shadow border-0 rounded-24 p-4 text-secondary">
                  <div class="card-body p-0 p-md-2">
                    <div class="swiper"
                      data-swiper='{"initialSlide": 0, "slidesPerView": 1, "centeredSlides": false, "autoplay": {"delay": 2000}, "speed": 1000, "spaceBetween": 30, "pagination": {"el": ".swiper-pagination", "clickable": true},"navigation": {"nextEl": ".swiper-button-next","prevEl": ".swiper-button-prev", "clickable": true} }'>
                      <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <div class="text-end pb-2"><img class="mb-1" src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/quote.svg" width="27" height="24" alt="Nayzak"></div>
                          <div class="d-flex align-items-center pb-4 pb-md-4">
                            <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar3.png" class="rounded-circle" width="60" height="60" alt="Nayzak">
                            <div class="ps-3">
                              <h6 class="text-dark mb-1">Gabe Oswald</h6>
                              <span class="fs-5">Lead Designers @Nike</span>
                            </div>
                          </div>
                          <p class="mb-0">Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id.</p>
                        </div>
                        <div class="swiper-slide">
                          <div class="text-end pb-2"><img class="pb-1" src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/quote.svg" width="27" height="23" alt="Nayzak"></div>
                          <div class="d-flex align-items-center pb-4 pb-md-4">
                            <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar3.png" class="rounded-circle" width="60" height="60" alt="Nayzak">
                            <div class="ps-3">
                              <h6 class="text-dark mb-1">Gabe Oswald</h6>
                              <span class="fs-5">Lead Designers @Nike</span>
                            </div>
                          </div>
                          <p class="mb-0">Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id.</p>
                        </div>
                        <div class="swiper-slide">
                          <div class="text-end pb-2"><img class="pb-1" src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/quote.svg" width="27" height="23" alt="Nayzak"></div>
                          <div class="d-flex align-items-center pb-4 pb-md-4">
                            <img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar3.png" class="rounded-circle" width="60" height="60" alt="Nayzak">
                            <div class="ps-3">
                              <h6 class="text-dark mb-1">Gabe Oswald</h6>
                              <span class="fs-5">Lead Designers @Nike</span>
                            </div>
                          </div>
                          <p class="mb-0">Excepteur sint occaecat cupidat non proident sunt in culpam qui the officia the anim id.</p>
                        </div>
                      </div>
                      <div class="swiper-pagination d-block d-md-none mt-4 pt-2"></div>
                    </div>
                  </div>
                </div>