有没有一种方法可以使该轮播循环并跳到第一张幻灯片
希望是使用 css 的解决方案,我已经尝试了几个小时,但仍然无法解决
我试图用CSS和javascript解决它,但仍然不能
注意:代码可能在这里不起作用,请尝试使用JSfiddle本身 或代码已被
任何帮助将非常感谢
const track = document.querySelector('.advertis__images-container-ul');
const slides = Array.from(track.children);
const slideWidth = slides[0].getBoundingClientRect().width;
slides.forEach((slide, i) => {
slide.style.left = slideWidth * i + 'px';
});
let x = 1;
const changeSlide = () => {
setTimeout(() => {
const currentSlide = track.querySelector('.current-slide');
const nextSlide = currentSlide.nextElementSibling;
if (slides.length > x) {
const amountTomove = nextSlide.style.left;
track.style.transform = `translateX(-${amountTomove})`;
currentSlide.classList.remove('current-slide');
nextSlide.classList.add('current-slide');
++x;
} else {
track.children[0].classList.add('current-slide');
track.children[x - 1].classList.remove('current-slide');
x = 1;
}
}, 3000);
};
changeSlide();
setInterval(() => {
changeSlide();
}, 3000);
.advertis {
display: flex;
flex-direction: column;
align-items: center;
width: 84.5rem;
height: 33rem;
overflow: hidden;
&__images-container {
position: relative;
&-ul {
transition: all 0.7s;
position: relative;
width: 84.6rem;
height: 31rem;
}
&-li {
list-style: none;
position: absolute;
width: 100%;
margin-left: -1px;
}
&-img {
object-fit: cover;
}
}
}
<section class="advertis">
<div class="advertis__images-container">
<ul class="advertis__images-container-ul">
<li #img class="advertis__images-container-li current-slide">
<img
src="https://i.ibb.co/c6cD9Sw/alm-app-install-ar.png"
alt="app advertisment"
class="advertis__images-container-img"
/>
</li>
<li #img class="advertis__images-container-li">
<img
src="https://i.ibb.co/N1G5h0x/alm-carousel-centrepoint-ar.png"
alt="centrepoint"
class="advertis__images-container-img"
/>
</li>
<li #img class="advertis__images-container-li">
<img
src="https://i.ibb.co/7Q2LB01/alm-carousel-hm-ar.png"
alt="advertisment"
class="advertis__images-container-img"
/>
</li>
<li #img class="advertis__images-container-li">
<img
src="https://i.ibb.co/597v83c/alm-carousel-noon-ar.png"
alt="noon"
class="advertis__images-container-img"
/>
</li>
</ul>
</div>
</section>
答案 0 :(得分:0)
也许您可以看看Owl Carousel,它是一个方便的插件,可以满足您的要求(循环显示项目)。