插入文件 ``` <link rel="stylesheet" href="https://at.alicdn.com/t/font_803257_hvjv8r7ugmo.css"> //如果要更改iconfont样式需要更改此处地址 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.js"></script> <script src="swiper/swiper.js"></script> ``` 框架代码 ``` <div class="swiper-container"> <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> ``` js代码 ``` window.onload = function () { var mySwiper = new Swiper('.swiper-container', { // direction: 'horizonal', loop: true, autoplay: { delay: 2000, stopOnLastSlide: false, disableOnInteraction: false, }, // 如果需要分页器 pagination: { el: '.swiper-pagination', clickable: true }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); }; ``` 样式修改 ``` <style> /* 导航按钮样式更改 */ .swiper-button-prev,.swiper-button-next{ background: none; } .iconfont{ font-size: 30px; } /* 分页器样式更改 */ .swiper-pagination-bullet-active{ background: #333; } </style> ```