Administrator 2024-03-14 前端框架 2818
轮播图的导航,点点点变成文字
使用swiper插件2.7版本
前端页面部分,使用循环
<div class="swiper-container-top banner">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#" ></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<#list list_images?chunk(colSize) as list_chunk>
<#list list_chunk as image>
<div class="swiper-slide"><img alt="" src="${image.picUrl}" onclick="${image.addClicksFun}"></div>
</#list>
</#list>
</div>
</div>
<div class="pagination"></div>
</div>
<div class="pagination1">
<#list list_images?chunk(colSize) as list_chunk>
<#list list_chunk as image>
<#if (image.pos == 1)>
<span class="swiper-pagination-bullet swiper-pagination-bullet-active">平安吉祥</span>
</#if>
<#if (image.pos == 2)>
<span class="swiper-pagination-bullet">万事如意</span>
</#if>
<#if (image.pos == 3)>
<span class="swiper-pagination-bullet">心想事成</span>
</#if>
<#if (image.pos == 4)>
<span class="swiper-pagination-bullet">马到成功</span>
</#if>
<#if (image.pos == 5)>
<span class="swiper-pagination-bullet">龙年大吉</span>
</#if>
</#list>
</#list>
</div>
js部分
var mySwiper = new Swiper('.swiper-container', {
loop: true,
grabCursor: true,
paginationClickable: true,
autoplay: 3000,
onSlideChangeEnd: function (swiper) {
let index = $('.swiper-slide-active').index()
// console.log(index)
if (index == 6) {
index = 1
}
$('.pagination1 .swiper-pagination-bullet').eq(index - 1).addClass('swiper-pagination-bullet-active').siblings().removeClass('swiper-pagination-bullet-active')
}
})