Sliders

Swiper Slider

Swiper Slider requires swiper-bundle.min.css to be loaded in the <head> part of the html file, swiper-bundle.min.js to be loaded at the bottom fo the file just before the closing </body> tag and the sliders must be initialized, the init-scripts are all included in the code tab of each slider from below.

<div id="default-swiper" class="swiper-container pagination-down">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="../assets/images/ph-square.jpg" alt="" class="rounded">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/ph-square.jpg" alt="" class="rounded">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/ph-square.jpg" alt="" class="rounded">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/ph-square.jpg" alt="" class="rounded">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/ph-square.jpg" alt="" class="rounded">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/ph-square.jpg" alt="" class="rounded">
        </div><!-- / swiper-slide -->
    </div><!-- / swiper-wrapper -->
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div><!-- / default-swiper -->

<!-- swiper-init -->
<script>
var swiper = new Swiper('#default-swiper', {
  slidesPerView: 3,
  spaceBetween: 15,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    '@0.25': {
      slidesPerView: 1,
    },
    '@0.5': {
      slidesPerView: 2,
    },
    '@1.00': {
      slidesPerView: 3,
    },
  }
});
</script>

Logo Swiper with Autoplay

<div id="logo-swiper" class="swiper-container swiper-grayscale">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo1.png" alt="">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo2.png" alt="">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo3.png" alt="">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo4.png" alt="">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo5.png" alt="">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo6.png" alt="">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo7.png" alt="">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo8.png" alt="">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo9.png" alt="">
        </div><!-- / swiper-slide -->
        <div class="swiper-slide">
            <img src="../assets/images/logos/logo10.png" alt="">
        </div><!-- / swiper-slide -->
    </div><!-- / swiper-wrapper -->
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div><!-- / logo-swiper -->

<!-- swiper-init -->
<script>
var swiper = new Swiper('#logo-swiper', {
  slidesPerView: 5,
  spaceBetween: 60,
  loop: true,
  speed: 1200,
  pagination: false,
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  breakpoints: {
    '@0.25': {
      slidesPerView: 2,
    },
    '@0.5': {
      slidesPerView: 3,
    },
    '@1.00': {
      slidesPerView: 5,
    },
  }
});
</script>

Fullwidth

<div id="fullwidth-swiper" class="swiper-container rounded">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
    </div><!-- / swiper-wrapper -->
    <!-- Add Arrows -->
    <div class="swiper-pagination"></div>
</div><!-- / fullwidth-swiper -->

<!-- swiper-init -->
<script>
var swiper = new Swiper('#fullwidth-swiper', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  keyboard: true,
});
</script>

Fullwidth with Arrows

<div id="fullwidth-nav-swiper" class="swiper-container rounded">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../assets/images/ph-bg.jpg" alt=""></div>
    </div><!-- / swiper-wrapper -->
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div><!-- / fullwidth-nav-swiper -->

<!-- swiper-init -->
<script>
var swiper = new Swiper('#fullwidth-nav-swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  keyboard: true,
});
</script>

Flow Swiper

<div id="flow-swiper" class="flow-swiper swiper-container pagination-down">
    <div class="swiper-wrapper">
        <div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
        <div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
        <div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
        <div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
        <div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
        <div class="swiper-slide rounded" style="background-image:url(../assets/images/ph-square.jpg)"></div>
    </div><!-- / swiper-wrapper -->
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div><!-- / flow-swiper -->

<!-- swiper-init -->
<script>
var swiper = new Swiper('#flow-swiper', {
  effect: 'coverflow',
  grabCursor: true,
  loop: true,
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
  breakpoints: {
    '@0.25': {
      centeredSlides: true,
      slidesPerView: "auto",
    },
    '@0.75': {
      centeredSlides: false,
      slidesPerView: 3,
    },
  },
  pagination: {
    el: '.swiper-pagination',
  },
});
</script>

Vertical Swiper

<div id="vertical-swiper" class="vertical-swiper swiper-container rounded">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(../assets/images/ph-bg.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(../assets/images/ph-bg.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(../assets/images/ph-bg.jpg)"></div>
    </div><!-- / swiper-wrapper -->
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div><!-- / vertical-swiper -->

<!-- swiper-init -->
<script>
var swiper = new Swiper('#vertical-swiper', {
  direction: 'vertical',
  slidesPerView: 1,
  mousewheel: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
</script>
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav