Bài viết này hướng dẫn cách tạo một Slider dạng Carousel với hình chính giữa to và nhỏ dần về hai bên.
Đầu tiên, bạn cần tải Swiper về tại đây. Sau đó, giải nén và đổi tên thư mục thành swiper
.
HTML
Bạn cần thêm 2 tập tin CSS và JS của Swiper vào dự án của mình.
<link rel="stylesheet" href="swiper/swiper-bundle.min.css" media="all">
<script src="swiper/swiper-bundle.min.js"></script>
Cấu trúc HTML của Swiper.
<div class="carousel-block">
<div class="container">
<div class="slider-container">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#1">
<img src="img/1.jpg" alt="Ảnh 1" width="300" height="404" loading="lazy">
<h3>Ảnh 1</h3>
</a>
</div>
<div class="swiper-slide">
<a href="#2">
<img src="img/2.jpg" alt="Ảnh 2" width="300" height="404" loading="lazy">
<h3>Ảnh 2</h3>
</a>
</div>
<div class="swiper-slide">
<a href="#3">
<img src="img/3.jpg" alt="Ảnh 3" width="300" height="404" loading="lazy">
<h3>Ảnh 3</h3>
</a>
</div>
<div class="swiper-slide">
<a href="#4">
<img src="img/4.jpg" alt="Ảnh 4" width="300" height="404" loading="lazy">
<h3>Ảnh 4</h3>
</a>
</div>
<div class="swiper-slide">
<a href="#5">
<img src="img/5.jpg" alt="Ảnh 5" width="300" height="404" loading="lazy">
<h3>Ảnh 5</h3>
</a>
</div>
<div class="swiper-slide">
<a href="#6">
<img src="img/6.jpg" alt="Ảnh 6" width="300" height="404" loading="lazy">
<h3>Ảnh 6</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
Để ảnh giữa to và nhỏ dần về 2 bên, bạn thêm đoạn CSS sau.
.swiper {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 285px;
height: auto;
position: relative;
overflow: hidden;
border-radius: 12px;
}
.swiper-slide img {
display: block;
width: 100%;
border-radius: 12px;
object-fit: cover;
transition: all 0.2s ease;
}
.swiper-slide-active img:hover {
transform: scale(1.1);
}
.swiper-slide h3 {
position: absolute;
bottom: 0;
display: none;
font-size: 22px;
color: #fff;
position: absolute;
background: var(--blur-1-color);
background: linear-gradient( to top,var(--theme-color),var(--theme-opacity-color) );
text-shadow: -1px -1px 2px var(--theme-color),2px 2px 3px var(--theme-color);
font-weight: 400;
transition: all .3s ease;
z-index: 3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
padding-right: 15px;
line-height: 1;
margin-bottom: 0;
border-radius: 0 0 12px 12px;
padding: 45px 10px 6px;
}
.swiper-slide-active h3 {
display: initial;
}
.swiper-pagination-bullet-active {
background: var(--theme-color);
}
.swiper-button-next, .swiper-button-prev {
color: var(--blur-1-color);
transition: all 0.2s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
color: var(--theme-color);
}
JS
Cuối cùng, để cấu hình cho Slider, các bạn dùng đoạn mã sau.
$(document).ready(function() {
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
slidesPerView: "auto",
loop: !0,
autoplay: { delay: 4e3 },
speed: 800,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2,
slideShadows: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
});
Các bạn có thể tinh chỉnh lại Slider dạng Carousel trên để phù hợp hơn với nhu cầu sử dụng, chúc các bạn thành công!
Không có bình luận.