CodeWithNiranjan/Animated-slider-using-swiper.js

In this tutorial we will be learning how to create animated swiper slider using Swiper.js

Swiper.js

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

Installation

Use UNPKG - CSS file ,JavaScript file or CDN - CSS file , JavaScript file.

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

Usage

<!-- 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>

.swiper {
  width: 600px;
  height: 300px;
}

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Subscribe

Please subscribe CodeWithNiranjan

Thank You