Slider - section

This section layout represents a slider showing customers reviews and testimony.

home page

CODE

Here is the HTML code to obtain it. Embed it within the main tag with class page-main.

HTML
<div class="section section-twoside fp-auto-height-responsive bg-white-gray bg-bright" data-section="slider-reviews">
  <!-- Begin of section wrapper -->
  <div class="section-wrapper twoside padding-bottom padding-top">

    <!-- begin of carousel-swiper-beta -->
    <div class="slider-wrapper carousel-swiper-review carousel-swiper-review-demo">
      <!-- slider -->
      <div class="slider-container swiper-container">
        <ul class="item-list swiper-wrapper">
          <!-- item -->
          <li class="slide-item swiper-slide">
            <div class="item">
              <div class="section-content center-vh">
                <!-- title and description -->
                <div class="title-desc text-center">
                  <p class="anim fadein-top td-2 display-5">"This Landing page is awesome"</p>
                  <p class="anim fadein-top td-3">Tim Gates, Micromac</p>
                </div>
              </div>
            </div>
          </li>
          <!-- item -->
          <li class="slide-item swiper-slide">
            <div class="item">
              <div class="section-content center-vh">
                <!-- title and description -->
                <div class="title-desc text-center">
                  <p class="anim fadein-top td-2 display-5">"It saved us a lot of times"</p>
                  <p class="anim fadein-top td-3">Jeff Ma, Alizon</p>
                </div>
              </div>
            </div>
          </li>
          <!-- item -->
          <li class="slide-item swiper-slide" data-hash="App page">
            <div class="item">
              <div class="section-content center-vh">
                <!-- title and description -->
                <div class="title-desc text-center">
                  <p class="anim fadein-top td-2 display-5">"We set up our landing page in hour"</p>
                  <p class="anim fadein-top td-3">Dave Johnson, Homecraft</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!-- pagination -->
      <div class="items-pagination"></div>
    </div>
    <!-- end of carousel-swiper-beta -->

  </div>
  <!-- End of section wrapper -->
</div>

To add another slide, duplicate the following li tag within the item-list ul

HTML Navigation menu
<!-- item -->
<li class="slide-item swiper-slide">
  <div class="item">
    <div class="section-content center-vh">
      <!-- title and description -->
      <div class="title-desc text-center">
        <p class="anim fadein-top td-2 display-5">"This Landing page is awesome"</p>
        <p class="anim fadein-top td-3">Tim Gates, Micromac</p>
      </div>
    </div>
  </div>
</li>

The attribute data-hash="Marketing" represent the button to navigate to this item.

Javascript

Within the main.js javascript file, the following script runs the slider (it uses Swiper JS carousel plugin):

Javascript slider
new Swiper('.carousel-swiper-review-demo .swiper-container', {
    pagination: '.carousel-swiper-review-demo .items-pagination',
    paginationClickable: true,
    loop: true,
    grabCursor: true,
    centeredSlides: true,
    autoplay: 5000,
    autoplayDisableOnInteraction: false,
    slidesPerView: 1,
    spaceBetween: 0,
});

If you want to add another similar slider, use a different class value for carousel-swiper-review-demo in the Javascript and HTML file for the new slider.