Trang chủ » HTML - CSS - Jquery » Responsive Card Slider bằng HTML CSS JavaScript sử dụng thư viện SwiperJs

HTML - CSS - Jquery

Responsive Card Slider bằng HTML CSS JavaScript sử dụng thư viện SwiperJs

25/06/2023

Card slider là tập hợp các thẻ được xếp theo chiều ngang và có tính năng trượt để xem các thẻ ẩn. Thẻ có thể chứa bất kỳ nội dung nào. Giống như thẻ hồ sơ, thẻ sản phẩm thương mại điện tử, thẻ blog tin tức, v.v...

Trong bài viết này mình sẽ chia sẻ với các bạn cách để tạo một Responsive Card Slider trong HTML CSS & JavaScript với SwiperJs. Card slider này sẽ bao gồm phân trang, các nút điều hướng và mũi tên để trượt thân thiện với mọi thiết bị di động.

Video hướng dẫn chi tiết

Code HTML


        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Slider</title>
    <!--- CSS -->
    <link rel="stylesheet" href="skin/css/style.css">
    <!--- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

</head> 
<body>
    
<div class="wapper">
    <div class="slide-container">
        <div class="slide-content swiper mySwiper">
            <div class="card-wrapper swiper-wrapper">
                 <div class="card swiper-slide">
                     <div class="image-content">
                         <span class="overlay">
    
                         </span>
                         <div class="card-image">
                             <img src="skin/images/1.jpg" alt="" class="card-img">
                         </div>
                     </div>
                     <div class="card-content">
                         <h2 class="name">Emma</h2>
                         <p class="description">
                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                         </p>
                         <button class="button">See More</button>
                     </div>
                 </div>

                 <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay">
   
                        </span>
                        <div class="card-image">
                            <img src="skin/images/2.jpg" alt="" class="card-img">
                        </div>
                    </div>
                    <div class="card-content">
                        <h2 class="name">Emma</h2>
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                        </p>
                        <button class="button">See More</button>
                    </div>
                </div>

                <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay">
   
                        </span>
                        <div class="card-image">
                            <img src="skin/images/3.jpg" alt="" class="card-img">
                        </div>
                    </div>
                    <div class="card-content">
                        <h2 class="name">Emma</h2>
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                        </p>
                        <button class="button">See More</button>
                    </div>
                </div>

                <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay">
   
                        </span>
                        <div class="card-image">
                            <img src="skin/images/4.jpg" alt="" class="card-img">
                        </div>
                    </div>
                    <div class="card-content">
                        <h2 class="name">Emma</h2>
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                        </p>
                        <button class="button">See More</button>
                    </div>
                </div>

                <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay">
   
                        </span>
                        <div class="card-image">
                            <img src="skin/images/5.jpg" alt="" class="card-img">
                        </div>
                    </div>
                    <div class="card-content">
                        <h2 class="name">Emma</h2>
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                        </p>
                        <button class="button">See More</button>
                    </div>
                </div>

                <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay">
   
                        </span>
                        <div class="card-image">
                            <img src="skin/images/6.jpg" alt="" class="card-img">
                        </div>
                    </div>
                    <div class="card-content">
                        <h2 class="name">Emma</h2>
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                        </p>
                        <button class="button">See More</button>
                    </div>
                </div>

                <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay">
   
                        </span>
                        <div class="card-image">
                            <img src="skin/images/7.jpg" alt="" class="card-img">
                        </div>
                    </div>
                    <div class="card-content">
                        <h2 class="name">Emma</h2>
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                        </p>
                        <button class="button">See More</button>
                    </div>
                </div>

                <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay">
   
                        </span>
                        <div class="card-image">
                            <img src="skin/images/8.jpg" alt="" class="card-img">
                        </div>
                    </div>
                    <div class="card-content">
                        <h2 class="name">Emma</h2>
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                        </p>
                        <button class="button">See More</button>
                    </div>
                </div>

                <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay">
   
                        </span>
                        <div class="card-image">
                            <img src="skin/images/9.jpg" alt="" class="card-img">
                        </div>
                    </div>
                    <div class="card-content">
                        <h2 class="name">Emma</h2>
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                        </p>
                        <button class="button">See More</button>
                    </div>
                </div>

                <div class="card swiper-slide">
                    <div class="image-content">
                        <span class="overlay">
   
                        </span>
                        <div class="card-image">
                            <img src="skin/images/10.jpg" alt="" class="card-img">
                        </div>
                    </div>
                    <div class="card-content">
                        <h2 class="name">Emma</h2>
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem dolores aut earum suscipit vitae, perspiciatis quae quasi sint tenetur iure vel totam in, odit odio minus! Dolor ipsum provident similique!
                        </p>
                        <button class="button">See More</button>
                    </div>
                </div>


            </div>
            <div class="swiper-button-next swiper-navBtn"></div>
            <div class="swiper-button-prev swiper-navBtn"></div>
            <div class="swiper-pagination"></div>    
        </div>
        
    </div>
</div>
<!--- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 25,
      loop:true,
      centerSlide:'true',
      fade:'true',
      grabCursor:'true',
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
        dynamicBullets:true,
      },
      navigation:{
          nextEl:".swiper-button-next",
          prevEl:".swiper-button-prev",
      },
      breakpoints:{
          0:{
              slidesPerView:1,
          },
          520:{
              slidesPerView:2,
          },
          950:{
              slidesPerView:3,
          },
      },
    });
  </script>
</body>
</html>

Code CSS


        @import url('https://fonts.googleapis.com/css2?family=Roboto');
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.wapper{
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: azure;
}
.slide-container{
    width: 1120px;
    max-width: 100%;
    padding: 40px;
}
.slide-content{
    margin: 0 40px;
    overflow: hidden;
    border-radius: 25px;
}
.card{
    border-radius: 25px;
    background-color: #fff; 
}
.image-content,.card-content{
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 14px;
}
.image-content{
    position: relative;
    row-gap: 5px;
}
.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #4070f4;
    left: 0;
    top: 0;
    border-radius: 25px 25px 0 25px;
}
.overlay::before,
.overlay::after{
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0;
    bottom: -40px;
    background-color: #4070f4;
}
.overlay::after{
    border-radius: 0 25px 0 0;
    background-color: #fff;

}
 .card-image{
     position: relative;
     height: 150px;
     width: 150px;
     background-color: transparent;
     border-radius: 50%;
     border: solid 2px #fff;
 }
 .card-image .card-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: solid 4px royalblue;
 }
.card-content .name{
    font-size: 18px;
    font-weight: 500;
    color: slategray;
}
.card-content .description{
    font-size: 14px;
    color:#707070;
    text-align: center;
}
.card-content .button{
    border: none;
    font-size: 16px;
    color: white;
    padding: 8px 16px;
    background-color: #4070f4;
    border-radius: 6px;
    margin: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.card-content .button:hover{
    background: #265DF2;
}

.swiper-navBtn{
    color: #6E93f7!important;
    transition: color 0.3s ease;
}
.swiper-navBtn:hover{
    color: #4070f4!important;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
    font-size: 40px!important;
}
.swiper-button-next{
    right: 0!important;
}
.swiper-button-prev{
    left: 0!important;
}
.swiper-pagination-bullet{
    background-color: #6e93f7;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background-color: #4070f4;
}

@media screen and (max-width:768px) {
    .slide-content{
        margin: 0 10px;
    }
    .swiper-navBtn{
        display: none;
    }
}

Code Javascript


        var swiper = new Swiper(".slide-content", {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });

Tải Code

 

 

 

Bài viết liên quan

Cách chuyển tệp từ Google Drive này sang Google Drive khác

14:16 . 07/03/2024

Google Drive cung cấp cho mỗi người dùng giới hạn 15 GB dung lượng lưu trữ miễn phí, điều này có thể không đủ đối với một số người. Vì lý do đó, nhiều người tạo nhiều tài khoản để đảm bảo có thêm dung lượng lưu trữ. Mặc dù Google biết và hiểu được hành động này, nhưng họ vẫn chưa triển khai bất kỳ tính năng nào để hỗ trợ người dùng chuyển tệp giữa các tài khoản Google Drive.
Hướng Dẫn Cách Tạo Trình Phát Nhạc bằng HTML, CSS và JavaScript

21:27 . 05/09/2023

Bằng việc sử dụng CSS để thiết kế giao diện cho trình phát nhạc. Bạn có thể tạo các phần tử trực quan như thanh điều khiển, ảnh bìa bài hát và nút bấm theo ý muốn của bạn. CSS cũng cho phép bạn tạo hiệu ứng chuyển động và thay đổi màu sắc để tạo ra trải nghiệm người dùng hấp dẫn, và quan trọng nhất sử dụng JavaScript để thêm tính năng hoạt động cho trình phát nhạc.
Code đếm ngược thời gian sử dụng Javascript

15:47 . 03/09/2023

Đoạn mã dưới đây sẽ tạo ra một trang HTML đơn giản hiển thị đồng hồ đếm ngược đến một thời điểm cụ thể. Bạn có thể sửa giá trị của biến endTime để thiết lập thời gian kết thúc đếm ngược.
Hướng Dẫn Tạo Trình Kéo Thả Sử Dụng HTML CSS và JavaScript

21:16 . 18/08/2023

Trong HTML, chúng ta tạo các phần tử mà người dùng có thể kéo và thả bằng cách sử dụng thuộc tính draggable. Ví dụ, để làm cho một phần tử có thể kéo và thả, ta có thể sử dụng mã sau
Hướng dẫn tạo QR Code Sử Dụng HTML, CSS Và Javascript

16:06 . 12/08/2023

Hiện tại QR Code được ứng dụng rất nhiều trong cuộc sống hàng ngày của chúng ta, vì sự nhanh chóng đáp ứng của nó. Ví dụ sử dụng điện thoại muốn truy cập vào website bán một món hàng để tra cứu thông tin, thay vì phải gõ một đường dẫn rất dài trên điện thoại, các hãng có thể cung cấp 1 QR Code dán lên sản phẩm là đường dẫn đến trang web. hoặc là việc thanh toán các hóa đơn bằng smartphone qua mã qr trên các ứng dụng ngân hàng rất tiện lợi và nhanh chóng.
Cách Tạo Vòng Quay May Mắn Sử Dụng HTML, CSS & JavaScript

20:51 . 29/06/2023

Vòng quay may mắn là một trò chơi đang được rất nhiều các công ty, đơn vị tổ chức thực hiện vào các dịp liên hoan công ty, hoặc lễ kỷ niệm để quay giải thưởng, tri ân, tặng quà.... Dựa vào xác suất may mắn sẽ giúp người chơi nhận được những phần quà giá trị với ô quay được.
Hướng dẫn cài đặt Microsoft Word Office dành cho Macbook

15:04 . 08/07/2022

Trong bài viết này mình sẽ hướng dẫn bạn cách cài đặt để dùng được Office trên Mac vĩnh viễn. Vì thế các tính năng đều đầy đủ không thiếu gì cả. Bạn yên tâm tải và cài đặt nhé.

 

ad right

bài viết hữu ích

facebook

Dịch vụ Quảng cáo Google Adwords
Gọi điện thoại
0988 542 856
Nhắn tin qua zalo
0988 542 856