swiper全屏滚动切换
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>swiper全屏滚动切换-jq22.com</title> | |
| <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> | |
| <style> | |
| @import url("https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/5.4.5/css/swiper.min.css"); | |
| html,body { | |
| width:100%; | |
| height:100%; | |
| overflow:hidden; | |
| margin:0; | |
| padding:0; | |
| } | |
| .swiper { | |
| width:100%; | |
| height:100%; | |
| --swiper-theme-color:#DB2C32; | |
| text-align:center; | |
| color:white; | |
| font-size:24px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/5.4.5/js/swiper.min.js" type="application/javascript"></script> | |
| <div class="swiper"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide" style="background-color: #1B6D85;">slider1</div> | |
| <div class="swiper-slide" style="background-color: #122B40;">slider2</div> | |
| <div class="swiper-slide" style="background-color: #2B542C;">slider3</div> | |
| <div class="swiper-slide" style="background-color: #070B10;">slider4</div> | |
| </div> | |
| <div class="swiper-pagination"></div> | |
| </div> | |
| <script> | |
| var mySwiper = new Swiper('.swiper', { | |
| autoplay: true, //可选选项，自动滑动 | |
| init: true, | |
| mousewheel: true, | |
| updateOnWindowResize: true, | |
| speed: 1200, | |
| noSwiping: true, | |
| autoHeight: true, //高度随内容变化 | |
| observer: true, | |
| observeParents: true, | |
| // slidesPerView:'auto', | |
| direction: 'vertical', // 垂直切换选项 | |
| loop: false, // 循环模式选项 | |
| roundLengths: true, //防止文字模糊 | |
| threshold: 30, | |
| pagination: { | |
| el: '.swiper-pagination', | |
| clickable: true, | |
| }, | |
| }) | |
| </script> | |
| </body> | |
| </html> | |
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：http://www.tukus.cn/cyzd/guan/182.html
上一篇：图片轮播代码
下一篇：jquery弹窗代码
