ホームページ >ウェブフロントエンド >htmlチュートリアル >スワイパーの基本的な使い方(4)

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

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

まず、基本的なスワイパーページを構築する必要があります。
もちろん、事前にダウンロードしたフレームワークファイルを引用することを忘れないでください。
この章では、コンテナの幅と高さの設定を追加しました

<!doctype html>
<html>
    <head>
        <title>在slide之间加上间隙</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="swiper.min.css">
        <style>
            body{
                margin:0;
                padding:0;
            }
            .swiper-Container{
                width:500px;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                text-align:center;
                font-size:18px;
                display:flex;
                justify-content:center;
                align-items:center;
                background:#F2F2F2;
            }
        </style>
    </head>

その後、最初のレッスンの内容に従って、基本的なスワイパーページのレイアウトを実装します

 <body>
        <div class="swiper-container">
            <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>
            <div class="swiper-pagination"></div>

幅と高さ

 <script src="swiper.min.js"></script>
        <script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                spaceBetween:30  //添加每个slide的间隙
            });
        </script>
    </body>
</html>

JS初期化コードにgap属性を追加するだけです

rrreee

このようにして、各スライドページの中央にギャップを追加できます。

上記はスワイパーの基本的な使い方 (4) です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

声明：

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

前の記事：スワイパーの基本的な使い方(3)次の記事：スワイパーの基本的な使い方(3)

続きを見る

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

関連記事