Добро пожаловать! В этом JavaScript-проекте мы расскажем вам об использовании SwiperJS. Мы также создали адаптивную карусель с использованием HTML, CSS Flexbox и SwiperJS. Итак, давайте узнаем о том, как это работает и в чем его польза.
Если вы не знаете, что такое SwiperJS, позвольте нам объяснить, прежде чем двигаться дальше с этим проектом. SwiperJS - это мощная библиотека JavaScript, которая обычно используется для создания слайдеров или каруселей в веб-проектах. В этом проекте мы также создали слайдер "карусель изображений", состоящий из 5 карточек. Каждая карточка содержит письменные данные, а также включает в себя 2 дополнительных небольших поля.
Большинство из вас, возможно, уже знают, для чего используются карусели. Если вы не знаете, то позвольте нам рассказать вам, что карусель - очень распространенный компонент в веб-дизайне. Многие интерфейсные разработчики используют карусели, чтобы сделать веб-сайты более привлекательными.
Структура HTML
Теперь давайте поговорим о ее HTML-структуре. Чтобы построить эту адаптивную карусель, мы создадим базовую HTML-структуру, которая ляжет в основу этой swiperJS carousel.
HTML-код начинается с элемента section. Здесь мы используем элемент section для покрытия всей карусели, поскольку он упрощает оформление и таргетинг раздела carousel с помощью CSS или JavaScript.
Затем внутри раздела есть элемент div с классом "swiper". Мы использовали его, потому что он действует как оболочка, которая содержит все отдельные слайды. Класс "swiper" также играет важную роль в интеграции и взаимодействии с библиотекой SwiperJS.
<section>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide--one">
<span>domestic</span>
<div>
<h2>Enjoy the exotic of sunny Hawaii</h2>
<p>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
Maui, Hawaii
</p>
</div>
</div>
<div class="swiper-slide swiper-slide--two">
<span>subtropical</span>
<div>
<h2>The Island of Eternal Spring</h2>
<p>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
Lanzarote, Spanien
</p>
</div>
</div>
<div class="swiper-slide swiper-slide--three">
<span>history</span>
<div>
<h2>Awesome Eiffel Tower</h2>
<p>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
Paris, France
</p>
</div>
</div>
<div class="swiper-slide swiper-slide--four">
<span>Mayans</span>
<div>
<h2>One of the safest states in Mexico</h2>
<p>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
The Yucatan, Mexico
</p>
</div>
</div>
<div class="swiper-slide swiper-slide--five">
<span>native</span>
<div>
<h2>The most popular yachting destination</h2>
<p>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
</svg>
Whitsunday Islands, Australia
</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>Каждый слайд карусели представлен элементом div с определенным классом и содержит содержимое этого конкретного слайда. После этого слайд также состоит из элемента span и значка SVG.
Значок SVG указывается с использованием элемента svg и включает данные пути для дизайна значка. Значок отображается рядом с соответствующим текстом местоположения.
Наконец, в конце контейнера класса «swiper» находится элемент div с классом «swiper-pagination». Он используется для отображения маркеров нумерации страниц для навигации между слайдами карусели. Теперь давайте перейдем к проектированию этой адаптивной карусели.
Стилизация с помощью CSS
Теперь обсудим стиль этой карусели. В этом мы на каждом занятии подробно узнаем, как делается эта карусель. Давайте пройдемся по каждому разделу кода CSS, чтобы понять, как он работает.
Во-первых, код начинается с класса раздела. Селектор разделов стилизует элемент контейнера для карусели. Он устанавливает относительное положение. Он также использует флексбокс для центрирования карусели по вертикали и горизонтали внутри раздела.
После этого к элементу контейнера карусели применяется класс swiper. Он применяется, поскольку устанавливает ширину 100 %, чтобы карусель занимала всю ширину родительского контейнера. затем идет класс swiper-slide, который представляет каждый слайд в карусели. Класс устанавливает фиксированную ширину и высоту для каждого слайда.
section {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(171,102,255,1) 0%, rgba(116,182,247,1) 90% );
overflow: hidden;
}
.swiper {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
width: 300px;
height: 400px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
filter: blur(1px);
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: end;
align-items: self-start;
}
.swiper-slide-active {
filter: blur(0px);
}
.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
background: #fff;
}
.swiper-slide span {
text-transform: uppercase;
color: #fff;
background: #1b7402;
padding: 7px 18px 7px 25px;
display: inline-block;
border-radius: 0 20px 20px 0px;
letter-spacing: 2px;
font-size: 0.8rem;
font-family: "Open Sans", sans-serif;
}
.swiper-slide--one span {
background: #62667f;
}
.swiper-slide--two span {
background: #087ac4;
}
.swiper-slide--three span {
background: #b45205;
}
.swiper-slide--four span {
background: #087ac4;
}
.swiper-slide h2 {
color: #fff;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 1.3rem;
line-height: 1.4;
margin-bottom: 15px;
padding: 25px 45px 0 25px;
}
.swiper-slide p {
color: #fff;
font-family: "Roboto", sans-serif;
font-weight: 300;
display: flex;
align-items: center;
padding: 0 25px 35px 25px;
}
.swiper-slide svg {
color: #fff;
width: 22px;
height: 22px;
margin-right: 7px;
}
.swiper-slide--one {
background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
url(https://images.unsplash.com/photo-1556206079-747a7a424d3d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80)
no-repeat 50% 50% / cover;
}
.swiper-slide--two {
background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
url("https://images.unsplash.com/photo-1571900670723-a317a66e3fb7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=423&q=80")
no-repeat 50% 50% / cover;
}
.swiper-slide--three {
background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
url("https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80")
no-repeat 50% 50% / cover;
}
.swiper-slide--four {
background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
url("https://images.unsplash.com/photo-1650367310179-e1b5b8e453c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80")
no-repeat 50% 50% / cover;
}
.swiper-slide--five {
background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
url("https://images.unsplash.com/photo-1596521864207-13d46b1a0c78?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80")
no-repeat 50% 50% / cover;
}
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
background-image: none;
}Затем класс swiper-slide-active применяется к текущему активному слайду. Он удаляет эффект размытия, устанавливая свойство фильтра. И после этого классы swiper-pagination-bullet и swiper-pagination-bullet-active стилизуют маркеры нумерации страниц для карусели.
Наконец, в коде CSS этой карусели селектор диапазона слайдов стилизирует текстовый элемент внутри каждого слайда. Он переводит текст в верхний регистр с помощью свойства text-transform. В основном цель этого CSS-кода — улучшить визуальное представление карусели и ее отдельных слайдов.
Объяснение JavaScript
Теперь переходим к самой важной части, благодаря которой эта карусель стала возможной, а именно к JS-библиотеке swiper. И здесь мы также написали код только для этой библиотеки. Поскольку его код не очень длинный, вам не составит большого труда его понять. Итак, давайте разберем этот код Javascript.
Код JavaScript этой карусели начинается с инициализации нового экземпляра Swiper и выбора элемента HTML с именем класса «swiper» для применения карусели. Тогда возникает эффект: «покрытие». Этот эффект создает трехмерную анимацию покрытия при переходе между слайдами.
var swiper = new Swiper(".swiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2,
slideShadows: true
},
spaceBetween: 60,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true
}
});Затем GrabCursor: true меняет курсор на курсор захвата при наведении курсора на карусель; после этого есть centeredSlides: true. что гарантирует, что активный слайд всегда будет центрирован в представлении карусели.
Для навигации мы выделили маркеры нумерации страниц, чтобы было легче перемещаться по карусели. Означает, что он настраивает нумерацию страниц для карусели. Он указывает элемент HTML с именем класса «swiper-pagination» в качестве контейнера нумерации страниц. Наконец, есть опция clickable: true, которая позволяет щелкать маркеры нумерации страниц.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
0 Комментарии