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

首頁

web前端

html教學

swiper的基礎使用（十一）

黄舟

Jan 20, 2017 pm 03:30 PM

swiper

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

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

<body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基礎使用（十一）" ></div>
                <div class="swiper-slide">H5EDU 2<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基礎使用（十一）" ></div>
                <div class="swiper-slide">H5EDU 3<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基礎使用（十一）" ></div>
                <div class="swiper-slide">H5EDU 4<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基礎使用（十一）" ></div>
                <div class="swiper-slide">H5EDU 5<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基礎使用（十一）" ></div>
                <div class="swiper-slide">H5EDU 6<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="swiper的基礎使用（十一）" ></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）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。