ホームページ >ウェブフロントエンド >jsチュートリアル >Swiper プラグインの概要と画像をカルーセル表示する方法

Swiper プラグインの概要と画像をカルーセル表示する方法

PHP中文网オリジナル: 2017-06-19 17:23:161744ブラウズ

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 文字列拡張の高頻度使用の概要

続きを見る