Create a Panorama Slider with Swiper slider
To create a panorama slider using Swiper.js, you can follow these steps. Swiper.js is a powerful and easy-to-use slider library that supports various types of sliders, including panorama sliders.
<script type="module" crossorigin src="https://panorama-slider.uiinitiative.com/assets/index.d2ce9dca.js"></script>
<link rel="modulepreload" href="https://panorama-slider.uiinitiative.com/assets/vendor.dba6b2d2.js">
<link rel="stylesheet" href="https://panorama-slider.uiinitiative.com/assets/index.c1d53924.css">
<div class="panorama-slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
<div class="swiper-slide">
<img class="slide-image" src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>