Как сделать, чтобы слайды менялись автоматически в свайпере?
без свайпа, без клика по кнопком
const swiper = new Swiper('.swiper', {
loop: false,
spaceBetween: 40,
slidesPerView: 7,
breakpoints: {
340: {
slidesPerView: 2,
},
480: {
slidesPerView: 3,
},
740: {
slidesPerView: 4,
},
1050: {
slidesPerView: 5,
spaceBetween: 40,
},
1250: {
slidesPerView: 6,
},
1350: {
slidesPerView: 7,
},
}
} );
.swiper-slide {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 45px;
}
.work__item {
width: 100%;
background-color: red;
height: 0px;
border-radius: 50%;
padding: 0 20px;
padding-top: 100%;
}
.work__item img {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
max-width: calc(100% - 40px);
width: 100%;
height: auto;
object-fit: cover;
opacity: 0.7;
}
*{
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.css" rel="stylesheet"/>
Ответы (1 шт):
Автор решения: Simon
→ Ссылка
Просто добавьте autoplay как описано в документации. Если я конечно же верно понял что Вам требуется.
const swiper = new Swiper('.swiper', {
loop: false,
spaceBetween: 40,
slidesPerView: 7,
autoplay: {
delay: 2000,
},
breakpoints: {
340: {
slidesPerView: 2,
},
480: {
slidesPerView: 3,
},
740: {
slidesPerView: 4,
},
1050: {
slidesPerView: 5,
spaceBetween: 40,
},
1250: {
slidesPerView: 6,
},
1350: {
slidesPerView: 7,
},
}
} );
.swiper-slide {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 45px;
}
.work__item {
width: 100%;
background-color: red;
height: 0px;
border-radius: 50%;
padding: 0 20px;
padding-top: 100%;
}
.work__item img {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
max-width: calc(100% - 40px);
width: 100%;
height: auto;
object-fit: cover;
opacity: 0.7;
}
*{
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="work__item">
<img src="https://svgshare.com/i/awm.svg" alt="">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.css" rel="stylesheet"/>