本文實例為大家分享了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" rel="external nofollow" > <!-- 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插件哦!
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
