swiper的基礎使用（十一）-html教學-PHP中文網

swiper的基礎使用（十一）

黄舟

發布： 2017-01-20 15:30:06

原創

1389 人瀏覽過

本次章節呢，我們來介紹swiper當中的抓手遊標，也就是改變我們遊標在swiper頁面當中的樣式。

第一步我們還是建立一個基礎的swiper頁面佈局。

<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。
接著我們改變遊標的樣式為抓手遊標可以看到依舊是一個屬性就實現了效果，非常的方便。

以上就是swiper的基礎使用（十一）的內容，更多相關內容請關注PHP中文網（www.php.cn）！