Create a Material animated Slider with the use of swiper
<script type="module" src="https://material-you-slider.uiinitiative.com/assets/main-URThdnVz.js"></script>
<link rel="stylesheet" href="https://material-you-slider.uiinitiative.com/assets/main-VvKB_Dlk.css">
<div class="demo-slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 1</span>
</div>
</div>
</div>
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 2</span>
</div>
</div>
</div>
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 3</span>
</div>
</div>
</div>
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 4</span>
</div>
</div>
</div>
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 5</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 1</span>
</div>
</div>
</div>
Slide 1
<div class="swiper-slide"><div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 2</span>
</div>
</div>
</div>
Slide 2
<div class="swiper-slide"><div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 3</span>
</div>
</div>
</div>
Slide 3
<div class="swiper-slide"><div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 4</span>
</div>
</div>
</div>
Slide 4
<div class="swiper-slide"><div class="swiper-material-wrapper">
<div class="swiper-material-content">
<img class="demo-material-image" data-swiper-material-scale="1.25" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
<span class="demo-material-label swiper-material-animate-opacity">Slide 5</span>
</div>
</div>
</div>
</div>
</div>
</div>