ホームページ  >  記事  >  ウェブフロントエンド  >  スワイパーの使い方(1)

スワイパーの使い方(1)

黄舟
黄舟オリジナル
2017-01-20 15:09:192094ブラウズ

swiper はモバイル ページのスライド フレームワークです。このフレームワークを使用して独自の履歴書を作成できます。

ページのスライドに加えて、スワイパーは使用できる他のさまざまな機能コンポーネントも提供します。

そしてメソッドとコールバック関数。

まず、基本的なスワイパーページ、つまりページめくり機能のみを備えたページを実装します。

まずフレームワークファイルを参照する必要があります。 swiper.css と swiper.js

<link rel="stylesheet" href="swiper.css">
<script src="swiper.js"></script>

外部コンテナを作成します。 swiper-cotainer

<div class="swiper-container">

次に、外側のコンテナーの中に内側のコンテナーを追加します。 swiper-wrapper

<div class="swiper-wrapper">

各フリップページを内部コンテナに追加

<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
<div class="swiper-slide>页面内容</div>
</div>
</div>




その後、jsで初期化

<script>
var swiper = new Swiper(&#39;.swiper-container&#39;);
</script>

上記はswiperの使い方(1)の内容です、続きはこちら 関連コンテンツ、PHP 中国語 Web サイト (www.php.cn) に注意してください。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。