Сегодня в этом блоге вы научитесь создавать адаптивный слайдер карточек в HTML, CSS и JavaScript с помощью SwiperJs. Ползунок карты будет иметь разбиение на страницы, кнопки навигации и функцию захвата слайда.
Ползунок карт означает комбинацию карт, выровненных по горизонтали, и имеет функцию скольжения, чтобы просмотреть скрытые карты. Карта может содержать любой контент. Например, карточки профиля, карточки продуктов электронной коммерции, карточки блогов и другие.
Посмотрите на изображение нашего продукта на экране. Как вы можете видеть в превью, мы видим три карточки с изображениями, текстовым содержимым и кнопками. Справа и слева мы видим две кнопки навигации, а в центре мы видим разбиение на страницы. На самом деле, всего девять карт, но ожидайте, что три из них находятся в скрытом состоянии. Чтобы увидеть другую карту, нам нужно щелкнуть любую кнопку навигации или мы можем взять карту и сдвинуть ее. Пагинация также работает, и мы также можем щелкнуть по ним, чтобы вывести следующую карту.
Ниже я предоставил видеоруководство для виртуального опыта этого проекта [Адаптивный слайдер карт]. Посмотрев видеоруководство, вы сможете увидеть реальную демонстрацию этого проекта и, очевидно, получить представление о том, как весь код HTML, CSS и JavaScript работает в этом проекте.
Видеоурок Отзывчивый слайдер карточек
Я предоставил весь код HTML CSS и JavaScript вместе с файлом swiper js, который я использовал для создания этого адаптивного слайдера карточек. Перед тем, как попасть в файл исходного кода, вам нужно немного ознакомиться с видео-уроком по карточному ползунку.
Как вы видели в видеоуроке. Сначала мы увидели три карточки с кнопкой навигации и пагинацией. Когда я нажал на левую кнопку навигации, карта скользнула влево, и появилась скрытая карта. Когда я нажимал на левую кнопку навигации, карты скользили вправо. Пагинация также показала нам активную карточку с ее индикатором. Чтобы создать все дизайны пользовательского интерфейса карты, я использовал HTML и CSS, а для создания слайдов карты я использовал плагин swiper js.
Я надеюсь, что теперь вы можете создать этот карточный слайдер, используя HTML CSS и JavaScript с плагином Swiper Js. Если вы испытываете трудности с созданием этого карточного слайдера, я предоставил все исходные коды ниже.
Карусель карт [Исходный код]
Чтобы получить следующий код HTML CSS и JavaScript для ползунка карты. Вам нужно создать три файла: HTML, CSS и файл JavaScript. После создания этих трех файлов вы можете скопировать и вставить данные коды в свой документ. Вы также можете загрузить все файлы исходного кода с помощью данной кнопки загрузки.
Все файлы (HTML, CSS) и скрипты (JavaScript) находятся в архиве!
HTML-код:
<div class="slide-container swiper">
<div class="slide-content">
<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="images/profile1.jpg" alt="" class="card-img">-->
</div>
</div>
<div class="card-content">
<h2 class="name">David Dell</h2>
<p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<!--<img src="images/profile2.jpg" alt="" class="card-img">-->
</div>
</div>
<div class="card-content">
<h2 class="name">David Dell</h2>
<p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<!--<img src="images/profile3.jpg" alt="" class="card-img">-->
</div>
</div>
<div class="card-content">
<h2 class="name">David Dell</h2>
<p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<!--<img src="images/profile4.jpg" alt="" class="card-img">-->
</div>
</div>
<div class="card-content">
<h2 class="name">David Dell</h2>
<p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<!--<img src="images/profile5.jpg" alt="" class="card-img">-->
</div>
</div>
<div class="card-content">
<h2 class="name">David Dell</h2>
<p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<!--<img src="images/profile6.jpg" alt="" class="card-img">-->
</div>
</div>
<div class="card-content">
<h2 class="name">David Dell</h2>
<p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<!--<img src="images/profile7.jpg" alt="" class="card-img">-->
</div>
</div>
<div class="card-content">
<h2 class="name">David Dell</h2>
<p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<!--<img src="images/profile8.jpg" alt="" class="card-img">-->
</div>
</div>
<div class="card-content">
<h2 class="name">David Dell</h2>
<p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<!--<img src="images/profile9.jpg" alt="" class="card-img">-->
</div>
</div>
<div class="card-content">
<h2 class="name">David Dell</h2>
<p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>
<button class="button">View More</button>
</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:
/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
.slide-container{
max-width: 1120px;
width: 100%;
padding: 40px 0;
}
.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;
padding: 25px 0;
}
.overlay{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #4070F4;
border-radius: 25px 25px 0 25px;
}
.overlay::before,
.overlay::after{
content: '';
position: absolute;
right: 0;
bottom: -40px;
height: 40px;
width: 40px;
background-color: #4070F4;
}
.overlay::after{
border-radius: 0 25px 0 0;
background-color: #FFF;
}
.card-image{
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
background: #FFF;
padding: 3px;
}
.card-image .card-img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 4px solid #4070F4;
}
.name{
font-size: 18px;
font-weight: 500;
color: #333;
}
.description{
font-size: 14px;
color: #707070;
text-align: center;
}
.button{
border: none;
font-size: 16px;
color: #FFF;
padding: 8px 16px;
background-color: #4070F4;
border-radius: 6px;
margin: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.button:hover{
background: #265DF2;
}
.swiper-navBtn{
color: #6E93f7;
transition: color 0.3s ease;
}
.swiper-navBtn:hover{
color: #4070F4;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
font-size: 35px;
}
.swiper-button-next{
right: 0;
}
.swiper-button-prev{
left: 0;
}
.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;
}
}
КОД JAVASCRIPT
var swiper = new Swiper(".slide-content", {
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,
},
},
});