Tạo một Slider dạng Carousel sử dụng Swiper

Xem demo Tải về

Đầ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!