Init HTML

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