CodeWithNiranjan / Animated-Card-Slider-Using-Swiper.js

In this video we are going to create animated card slider using swiper.js

Animated Card Slider Using 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

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

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

Usage

<!-- Slider main container -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="container">
                <h1>A</h1>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="container">
                <h1>B</h1>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="container">
                <h1>C</h1>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="container">
                <h1>D</h1>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="container">
                <h1>E</h1>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="container">
                <h1>F</h1>
            </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

const swiper = new Swiper('.swiper', {
  effect: "slider",
  slidesPerView : 3,
  grabCursor: true,
  centeredSlides: true,
  pagination: {
    el: '.swiper-pagination',
  },
});

Subscribe

Please subscribe CodeWithNiranjan

Thank You