スワイパーの基本的な使い方(11)-htmlチュートリアル-php.cn

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

黄舟

リリース： 2017-01-20 15:30:06

オリジナル

1391 人が閲覧しました

この章では、スワイパーページのカーソルのスタイルを変更する、スワイパーのグリッパーカーソルを紹介します。

最初のステップは、基本的なスワイパーページレイアウトを構築することです。

<body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

ログイン後にコピー

ページのスタイルを忘れないようにしましょう。私はデモンストレーションのためにここに来たので、簡単です。

<style>
            body{
                margin:0;
                padding:0;
                background:#eee;
            }
            .swiper-container{
                width:300px;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                font-size:18px;
                background:#fff;
                display:flex;
                text-align:center;
                justify-content:center;
                align-items:center;
            }
        </style>

ログイン後にコピー

外側のコンテナの幅を 100%、高さを 300px に設定します。
次に、ページコンテンツが垂直方向と水平方向の中央に配置されるように設定します。
次に、初期化のための js 部分に移動します。

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                spaceBetween:30,
                slidesPerView:3,
                grabCursor:true  //开启抓手光标
            });
        </script>

ログイン後にコピー

ここではページグループの表示を設定しているので、ページの幅は外部コンテナの幅を自動的に分割し、ページの高さは300pxのままです。
次に、カーソルのスタイルをハンドカーソルに変更します。これはまだ属性であり、効果が得られていることがわかり、非常に便利です。

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