1 подписчик

Бесконечная карусель на JavaScript

5 октября 20235 окт 2023

5 мин

Оставляем для вас ниже код, который поможет создать бесконечную карусель с фотокарточками. HTML <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-

Оглавление

HTML
CSS

Оставляем для вас ниже код, который поможет создать бесконечную карусель с фотокарточками.

HTML

<span>domestic</span>

<div>

<h2>Enjoy the exotic of sunny Hawaii</h2>

<p>

</svg>

Maui, Hawaii

</p>

</div>

<span>subtropical</span>

<div>

<h2>The Island of Eternal Spring</h2>

<p>

</svg>

Lanzarote, Spanien

</p>

</div>

<span>history</span>

<div>

<h2>Awesome Eiffel Tower</h2>

<p>

</svg>

Paris, France

</p>

</div>

<span>Mayans</span>

<div>

<h2>One of the safest states in Mexico</h2>

<p>

</svg>

The Yucatan, Mexico

</p>

</div>

<span>native</span>

<div>

<h2>The most popular yachting destination</h2>

<p>

</svg>

Whitsunday Islands, Australia

</p>

</div>

</div>

</section>

CSS

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Roboto:wght@300;400;500&display=swap");

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

section {

position: relative;

width: 100%;

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: #2196f3;

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 {