BANNER幻灯片底部下面有小图片点击切换swiper效果
//参考:https://www.swiper.com.cn/demo/070-pagination-custom.html
//参考:https://www.swiper.com.cn/api/pagination/70.html
实例见彩石效果图网站
<!--banner begin-->
<!-- Swiper -->
<div class="swiper-container" style="background-color:#000000; ">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="/" target="_blank">
<img src="{dede:global.cfg_templets_skin/}/images/banan1.jpg" class="swiper-lazy" />
</a>
</div>
<div class="swiper-slide">
<a href="/" target="_blank">
<img src="{dede:global.cfg_templets_skin/}/images/banan2.jpg" class="swiper-lazy" />
</a>
</div>
<div class="swiper-slide">
<a href="/" target="_blank">
<img src="{dede:global.cfg_templets_skin/}/images/banan3.jpg" class="swiper-lazy" />
</a>
</div>
<div class="swiper-slide">
<a href="/" target="_blank">
<img src="{dede:global.cfg_templets_skin/}/images/banan4.jpg" class="swiper-lazy" />
</a>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination" style="top:-2px;position:relative;"></div>
</div>
<!-- Swiper JS -->
<!-- Initialize Swiper -->
<script>
//参考:https://www.swiper.com.cn/demo/070-pagination-custom.html
//参考:https://www.swiper.com.cn/api/pagination/70.html
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
switch(index){
case 0:text='2020开运大礼';break;
case 1:text='选彩石效果图享更多满赠礼';break;
case 2:text='VR全景赠送2张视角';break;
case 3:text='效果图行业首选品质保障';break;
}
return '<span class="' + className + '" style="top:-10px;position:relative;color:#c49ea5;width:200px;height:60px;line-height:60px;border-radius:0;">' + text + '</span>';
},
},
});
</script>
<style>
.swiper-pagination{background-color:#000000; width:100%;height:50px;}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0);
}
.swiper-pagination-bullet-active {
color:#c49ea5;
background: #d51b51;
}
</style>
<!--banner end-->