Создать адаптивный слайдер карточек | Create Responsive Card Slider in HTML CSS & JavaScript | Swiper Js

На YouTube, Netflix, Facebook и других платформах вы, возможно, видели и использовали карусель изображений, текста или видео или форму скользящего варианта, где вы можете получить другой контент, скользя по нему. Знаете ли вы, что мы можем сделать карточный слайдер такого типа, просто используя HTML CSS и JavaScript с плагином Swiper Js.

Да, сегодня вы создадите адаптивный слайдер карт в HTML CSS JavaScript с плагином SwiperJs. Даже если вы новичок в HTML, CSS и JavaScript и не знаете, как использовать такие плагины, как SwiperJs, после прочтения этого блога вы также сможете легко создать этот процесс.

Слайдер карт представляет собой комбинацию двух или более карт, которые можно двигать вправо или влево. Эти типы карт доступны на веб-сайте или в приложении, которое содержит некоторую конкретную информацию в краткой форме.

Взгляните на данное изображение нашего карточного слайдера. Как видите, всего три карты с разными изображениями, именами и заданиями. В середине первой и последней карты мы видим кнопку, очевидно, которая используется для перемещения карты справа налево. Кроме того, мы можем сдвинуть эту карту, наведя на нее курсор. Интересным моментом в этом проекте является то, что я также добавил нумерацию страниц. Этот слайдер карты будет полностью адаптивным.

СКАЧАТЬ

HTML КОД:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.4/swiper-bundle.min.css" />

<div class="container swiper">
      <div class="slide-container">
        <div class="card-wrapper swiper-wrapper">
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/fullDev.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile1.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">David Cardlos</h3>
                <h4 class="job">Full Stack Developer</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/photographer.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile2.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">Siliana Ramis</h3>
                <h4 class="job">Photographer</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/dataAna.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile3.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">Richard Bond</h3>
                <h4 class="job">Data Analyst</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/appDev.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile4.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">Priase</h3>
                <h4 class="job">App Developer</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/blogger.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile5.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">James Laze</h3>
                <h4 class="job">Blogger</h4>
              </div>
            </div>
          </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>

CSS КОД:

.container {
  max-width: 1120px;
  width: 100%;
  padding: 40px 0;
}
.slide-container {
  margin: 0 30px;
  overflow: hidden;
}
.card {
  background: #fff;
  border-radius: 8px;
}
.card .image-box {
  height: 200px;
}
.card .image-box img {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
}
.card .profile-details {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding: 15px;
}
.card .profile-details img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.profile-details .name {
  font-size: 15px;
  font-weight: 500;
}
.profile-details .job {
  font-size: 12px;
  font-weight: 500;
  color: #4d4d4d;
}
.swiper-navBtn {
  color: #000;
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 50%;
}
.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 18px;
}
.swiper-pagination-bullet {
  background-color: #000;
}
@media screen and (max-width: 768px) {
  .swiper-navBtn {
    display: none;
  }
}

JAVASCRIPT КОД:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.4/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper(".slide-container", {
  slidesPerView: 4,
  spaceBetween: 20,
  sliderPerGroup: 4,
  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,
    },
    768: {
      slidesPerView: 3,
    },
    1000: {
      slidesPerView: 4,
    },
  },
});
</script>