コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > スワイパーの基本的な使い方 (6)

スワイパーの基本的な使い方 (6)

黄舟
リリース： 2017-01-20 15:23:50
オリジナル
1206 人が閲覧しました

このセクションでは主にスワイパーのセンタリング属性について説明します。

この中央揃えは、閲覧している現在のページを中央揃えにすることを指し、グループ表示を使用すると効果がより顕著になります。
まず、最初のセクションの内容に従って、基本的なスワイパー ページを完成させる必要があります。 


   <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 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 class="swiper-slide">第十三页</div>
            </div>
        </div>
ログイン後にコピー

次に、効果をより明確にするために、ページにグループ表示とページギャップを追加します。削除するかコメントしてページの効果を確認してください。 

<script>            
var swipre = new Swiper(&#39;.swiper-container&#39;,{                
slidesPerView:4,   //分组显示                
spaceBetween:30    //页面间隙                
centeredSlides:true  //页面居中            
});        
</script>
ログイン後にコピー

このようにして、ページの中央揃え属性がプロジェクトに追加されます

上記は、swiper の基本的な使用法 (6) です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) を参照してください。 ）！


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