ホームページ > 記事 > ウェブフロントエンド > シンプルで実用的なjsプラグイン - Swiper
シンプルで実用的なjsプラグイン - Swiper
- 零下一度オリジナル
- 2017-06-27 11:02:342655ブラウズ
Swiper (Swiper master) は、現在広く使用されているモバイル Web ページのタッチ コンテンツのスライディング JS プラグインで、カルーセルとスライディングに使用できます。
-
タッチ設定
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="swiper.css?1.1.11"/> <style> .swiper-container { width: 600px; height: 300px; } .swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color: cornflowerblue; } .swiper-slide:nth-of-type(2){ background-color: coral; } .swiper-slide:nth-of-type(3){ background-color: yellowgreen; } </style> </head> <body> <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> <!--导航等组件可以放在container之外--> <script src="swiper.js?1.1.11"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical',// loop: true,// // // 如果需要分页器 pagination: '.swiper-pagination',// // // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev',// // // 如果需要滚动条 scrollbar: '.swiper-scrollbar', })</script> </body></html> -
共通のプロパティとコールバック
var mySwiper = new Swiper ('.swiper-container', { // 滑动方向 // horizontal水平 // vertical垂直 direction: 'horizontal', // 初始化时候slide的索引(从0开始) initialSlide: 1, // 手指松开至slide贴合的时间 speed:3000, // 设置自动播放的事件间隔 autoplay: 2000, // 可显示数量 slidesPerView:2, // 滑块居中 centeredSlides:true, })
以上がシンプルで実用的なjsプラグイン - Swiperの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。