ホームページ > 記事 > ウェブフロントエンド > Swiper プラグインの概要と画像をカルーセル表示する方法
Swiper プラグインの概要と画像をカルーセル表示する方法
- PHP中文网オリジナル
- 2017-06-19 17:23:161706ブラウズ
swiper
Swiper は、純粋な JavaScript で作成された、携帯電話、タブレット、その他のモバイル端末向けのスライド特殊効果プラグインです。
スワイパーは、タッチスクリーンのフォーカス画像、タッチスクリーンのタブ切り替え、タッチスクリーンのマルチ画像切り替えなどの一般的な効果を実現できます。
Swiper はオープンソースで、無料で、安定していて、使いやすく、強力です。モバイル端末の Web サイトを構築するには重要な選択肢です。
1. まず、swiper.min.js ファイルと swiper.min.css ファイルを作成します。
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css?1.1.10"> </head> <body> ... </body>rreerree
2. HTML コンテンツを作成します。
3989f20b29ca3784489ad4a92ad594dd2cacc6d41bbb37262a98f745aa00fbf0
3. Swiper のサイズを定義したいかもしれませんが、もちろんそうではありません。
73a6ac4ed44ffec12cee46588e518a5e
4. Swiperの初期化: 36cc49f0c466276486e50c850b7e4956タグ(関数呼び出し)の隣に置くのがベストです
<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>
var swiper=new Swiper('.swiper-container',{
autoplay:1000, //自動カルーセル
autoplayDisableOnInteraction:false,//スライド後スクロール継続
loop:true,///Loop
pagination:'.swiper-pagination',////Pagination
paginationClickable:true,////小さな点click
spaceBetween: 30 ,//画像ギャップ
方向: "horizontal"//デフォルト水平垂直
})
.swiper-container {
width: 600px;
height: 300px;
}以上がSwiper プラグインの概要と画像をカルーセル表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ES6 文字列拡張の高頻度使用の概要次の記事：ES6 文字列拡張の高頻度使用の概要