https://github.com/nolimits4web/swiper
1. 引入
<link rel="stylesheet" th:href="@{/mall/css/swiper-bundle.min.css}">
<script th:src="@{/mall/js/swiper-bundle.min.js}" type="text/javascript"></script>2. 后端提取数据传入前端并放入session。
request.setAttribute("tests", tests);//轮播图 tests为数组，放test对象，对象属性有重定向地址和轮播图路径地址3.轮播图数据渲染
<div class="swiper-container fl">
<div class="swiper-wrapper">
<th:block th:unless="${#lists.isEmpty(tests)}">
<th:block th:each="test : ${tests}">
<div class="swiper-slide">
<a th:href="@{${test.redirectUrl}}">
<img th:src="@{${test.testurl}}" alt="">
</a>
</div>
</th:block>
</th:block>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>4.js中初始化Swiper插件
var newbeeSwiper = new Swiper('.swiper-container', {
//设置自动播放
autoplay: {
delay: 2000,
disableOnInteraction: false
},
//设置无限循环播放
loop: true,
//设置圆点指示器
pagination: {
el: '.swiper-pagination',
},
//设置上下页按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107543.html
