今天咱们来说一下.Swiper轮播图.
超级简单的:
翠花,上代码:
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Swiper demo</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> | |
| <!-- Link Swiper's CSS --> | |
| <link rel="stylesheet" href="../dist/css/swiper.min.css"> | |
| <!-- Demo styles --> | |
| <style> | |
| html, body { | |
| position: relative; | |
| height: 100%; | |
| } | |
| body { | |
| background: #eee; | |
| font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | |
| font-size: 14px; | |
| color:#000; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .swiper-container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .swiper-slide { | |
| text-align: center; | |
| font-size: 18px; | |
| background: #fff; | |
| /* Center slide text vertically */ | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: flex; | |
| -webkit-box-pack: center; | |
| -ms-flex-pack: center; | |
| -webkit-justify-content: center; | |
| justify-content: center; | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| -webkit-align-items: center; | |
| align-items: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Swiper --> | |
| <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 class="swiper-slide">Slide 4</div> | |
| <div class="swiper-slide">Slide 5</div> | |
| <div class="swiper-slide">Slide 6</div> | |
| <div class="swiper-slide">Slide 7</div> | |
| <div class="swiper-slide">Slide 8</div> | |
| <div class="swiper-slide">Slide 9</div> | |
| <div class="swiper-slide">Slide 10</div> | |
| </div> | |
| <!-- Add Pagination --> | |
| <div class="swiper-pagination"></div> | |
| </div> | |
| <!-- Swiper JS --> | |
| <script src="../dist/js/swiper.min.js"></script> | |
| <!-- Initialize Swiper --> | |
| <script> | |
|
var swiper = new Swiper('.swiper-container', { //小白点 |
|
| pagination: '.swiper-pagination', | |
| paginationClickable: true | |
| }); | |
| </script> | |
| </body> | |
| </html> |
最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!