Đầ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 để phù hợp hơn với nhu cầu sử dụng, chúc các bạn thành công!