[JavaScript知识库]Swiper 轮播图插件实现

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。

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',
    }
})