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 コンテンツを作成します。

　　<script src="path/to/swiper.min.js?1.1.10"></script>

ログイン後にコピー

3. Swiper のサイズを定義したいかもしれませんが、もちろんそうではありません。

</html>

ログイン後にコピー

4. 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>

　　<!-- 如果需要分页器 -->
　　<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 サイトの他の関連記事を参照してください。