コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

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

黄舟
リリース： 2017-01-20 15:09:19
オリジナル
2090 人が閲覧しました

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 サイト (m.sbmmt.com) に注意してください。


関連ラベル：
swiper
ソース：php.cn
前の記事：SVG ベースの走行距離計デジタル モーション ブラー特殊効果プラグイン 次の記事：スワイパーの基本的な使い方(2)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1900
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2070
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1740
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1646
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1655
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート