插件，轮播图

轮播图/插件

1. link引入min.css

script引入min.js(src..)

1. 复制粘贴

Swiper-中文教程，使用方法

<div class="swiper">

    <div class="swiper-wrapper">

        <div class="swiper-slide">Slide 1</div>

        <div class="swiper-slide">Slide 2</div>

        <div class="swiper-slide">Slide 3</div>

    </div>

    <!-- 如果需要分页器 -->

    <div class="swiper-pagination"></div>

   

    <!-- 如果需要导航按钮 -->

    <div class="swiper-button-prev"></div>

    <div class="swiper-button-next"></div>

   

    <!-- 如果需要滚动条 -->

    <div class="swiper-scrollbar"></div>

</div>

导航等组件可以放在Swiper容器之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper {

    width: 600px;

    height: 300px;

} 

4.初始化Swiper。

<script>       

  var mySwiper = new Swiper ('.swiper', {

    direction: 'vertical', // 垂直切换选项

    loop: true, // 循环模式选项

   

    // 如果需要分页器

    pagination: {

      el: '.swiper-pagination',

    },

   

    // 如果需要前进后退按钮

    navigation: {

      nextEl: '.swiper-button-next',

      prevEl: '.swiper-button-prev',

    },

   

    // 如果需要滚动条

    scrollbar: {

      el: '.swiper-scrollbar',

    },

  })       

  </script>