面对这样的问题,我需要创建一个滑块,其中将有一个进度条时,使用Swiper,这将看起来像这样的东西,我发现一个类似的问题光滑的滑块,但它不适合这个解决方案,我不知道如何处理,帮助,指向路径)
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/slider/1.jpg"></div>
<div class="swiper-slide"><img src="img/slider/2.jpg"></div>
<div class="swiper-slide"><img src="img/slider/3.jpg"></div>
</div>
<div class="swiper-pagination">
<div>
<h3>slide 1</h3>
<span data-slick-index="0" class="progressBar"></span>
</div>
<div>
<h3>slide 2</h3>
<span data-slick-index="1" class="progressBar"></span>
</div>
<div>
<h3>slide 3</h3>
<span data-slick-index="2" class="progressBar"></span>
</div>
</div>
</div>
<script>
new Swiper('.swiper', {
direction: 'horizontal',
controls: false,
loop: true,
});
</script>
1条答案
按热度按时间ruarlubt1#
解决了问题。
对于那些可能需要更多的人,我会留下代码:)
和html
css -〉