## 5.swiper 轮播 ~~~ <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> ~~~ ~~~ .swiper-container { width: 600px; height: 400px; } .swiper-pagination-bullet-active { background-color: #fff; } .swiper-button-prev, .swiper-button-next{ background: url("images/icon-slides.png"); width: 40px; height: 70px; } .swiper-button-prev{ background-position-x: 82px; } .swiper-button-next{ background-position-x: 41px; } ~~~ ~~~ <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/01.png" alt=""></div> <div class="swiper-slide"><img src="images/02.png" alt=""></div> <div class="swiper-slide"><img src="images/03.png" alt=""></div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> ~~~