swaiper实现轮播图

swiper

初始化swiper

第一个参数为： 轮播图容器的css选择器
第二个参数为：是一个对象，这个对象用来做配置的

.swiper-container {
    width: 790px;
    height: 340px;
}  
.swiper-pagination-bullet{
    width: 12px;
    height: 12px;
}
.swiper-pagination-bullet-active{
    background-color: red;
}
```
````html
<div class="swiper-container" id="box">
    <!-- 装图片，类似于ul -->
    <div class="swiper-wrapper">
        <!-- 类似于li -->
        <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/3.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/4.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/5.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/6.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/7.jpg" alt=""></div>
        <div class="swiper-slide"><img src="./images/8.jpg" alt=""></div>
    </div>
    <!-- 小圆点 ol -->
    <div class="swiper-pagination"></div>
    
    <!-- 左右箭头 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<script src="swiper/js/swiper.js"></script>

new Swiper("#box", {
    effect : 'slide',
    loop: true, // 无缝效果，
    // direction : 'vertical', // 垂直切换
    // autoplay: true, // 自动切换
    autoplay: {
        delay: 1000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable :true,
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
});