Swiper
The Most Modern Mobile Touch Slider
Example #1
HTML
<div class="slide-v1 hero-slider position-relative style-white" data-aos="fade-in">
<div class="swiper-container position-relative"
data-slide='{
"slidesPerView": 1,
"lazy": false,
"effect": "fade",
"autoplay": {"delay": 9500},
"speed": 1000,
"loop": false,
"spaceBetween": 0,
"pagination": {"el": ".swiper-pagination", "clickable": true}
}'>
<!-- swiper slides -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="position-relative">
<div class="slide-img">
<img src="img/slider/slide-1.jpg" class="img-fluid w-100" alt="img" loading="lazy">
</div>
<div class="position-absolute top-0 end-0 start-0 bottom-0 z-index-9">
<div class="container h-100 d-flex justify-content-start align-items-center">
<div class="swiper-animation anm-fadeInUp mt-5 mb-2">
<div class="overflow-hidden">
<h2 class="display-3 mb-3">
Modern Interior<br>Design Studio
</h2>
</div>
<div class="overflow-hidden">
<p class="mb-0">Today shopping with 5% back in rewards.</p>
</div>
<div class="overflow-hidden d-flex align-items-center flex-wrap">
<a aria-label="link" class="mt-4 mt-lg-5 btn btn-primary" href="shop.html">
<span>Shop Now</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-relative">
<div class="slide-img">
<img src="img/slider/slide-2.jpg" class="img-fluid w-100" alt="img" loading="lazy">
</div>
<div class="position-absolute top-0 end-0 start-0 bottom-0 z-index-9">
<div class="container h-100 d-flex justify-content-start align-items-center">
<div class="swiper-animation anm-fadeInUp mt-5 mb-2">
<div class="overflow-hidden">
<h2 class="display-3 mb-3">
Modern Interior<br>Design Studio
</h2>
</div>
<div class="overflow-hidden">
<p class="mb-0">Today shopping with 5% back in rewards.</p>
</div>
<div class="overflow-hidden d-flex align-items-center flex-wrap">
<a aria-label="link" class="mt-4 mt-lg-5 btn btn-primary" href="shop.html">
<span>Shop Now</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- !swiper slides -->
<!-- pagination dots -->
<div class="swiper-pagination position-absolute bottom-0 mb-2"></div>
<!-- end pagination dots -->
</div>
</div>
Example #2
HTML
<div class="hero-slider position-relative">
<div class="swiper-container overflow-hidden"
data-slide='{
"slidesPerView": 6,
"lazy": true,
"loop": true,
"autoplay": {"delay": 2000},
"speed": 1000,
"spaceBetween": 0,
"breakpoints": {
"0": { "slidesPerView": 2, "spaceBetween": 0 },
"480": {"slidesPerView": 3,"spaceBetween": 0 },
"768": { "slidesPerView": 4, "spaceBetween": 0},
"992": { "slidesPerView": 5,"spaceBetween": 0},
"1200": {"slidesPerView": 6,"spaceBetween": 0 }
}
}'
>
<!-- swiper slides -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<a aria-label="link" href="shop.html" class="d-block hover-scale-image hover-translate-y-items overflow-hidden">
<img src="img/instagram/instagram-1.jpg" class="img-fluid swiper-lazy w-100" alt="img" loading="lazy">
<i class="bi bi-instagram hover-item fs-20 text-white"></i>
</a>
</div>
<div class="swiper-slide">
<a aria-label="link" href="shop.html" class="d-block hover-scale-image hover-translate-y-items overflow-hidden">
<img src="img/instagram/instagram-2.jpg" class="img-fluid swiper-lazy w-100" alt="img" loading="lazy">
<i class="bi bi-instagram hover-item fs-20 text-white"></i>
</a>
</div>
<div class="swiper-slide">
<a aria-label="link" href="shop.html" class="d-block hover-scale-image hover-translate-y-items overflow-hidden">
<img src="img/instagram/instagram-3.jpg" class="img-fluid swiper-lazy w-100" alt="img" loading="lazy">
<i class="bi bi-instagram hover-item fs-20 text-white"></i>
</a>
</div>
<div class="swiper-slide">
<a aria-label="link" href="shop.html" class="d-block hover-scale-image hover-translate-y-items overflow-hidden">
<img src="img/instagram/instagram-4.jpg" class="img-fluid swiper-lazy w-100" alt="img" loading="lazy">
<i class="bi bi-instagram hover-item fs-20 text-white"></i>
</a>
</div>
<div class="swiper-slide">
<a aria-label="link" href="shop.html" class="d-block hover-scale-image hover-translate-y-items overflow-hidden">
<img src="img/instagram/instagram-5.jpg" class="img-fluid swiper-lazy w-100" alt="img" loading="lazy">
<i class="bi bi-instagram hover-item fs-20 text-white"></i>
</a>
</div>
<div class="swiper-slide">
<a aria-label="link" href="shop.html" class="d-block hover-scale-image hover-translate-y-items overflow-hidden">
<img src="img/instagram/instagram-6.jpg" class="img-fluid swiper-lazy w-100" alt="img" loading="lazy">
<i class="bi bi-instagram hover-item fs-20 text-white"></i>
</a>
</div>
<div class="swiper-slide">
<a aria-label="link" href="shop.html" class="d-block hover-scale-image hover-translate-y-items overflow-hidden">
<img src="img/instagram/instagram-7.jpg" class="img-fluid swiper-lazy w-100" alt="img" loading="lazy">
<i class="bi bi-instagram hover-item fs-20 text-white"></i>
</a>
</div>
</div>
<!-- !swiper slides -->
</div>
</div>
Animations
- .anm-fadeInUp
- .anm-fadeInDown
- .anm-fadeInLeft
- .anm-fadeInRight