Basic use of swiper (11)-HTML Tutorial-php.cn

Basic use of swiper (11)

黄舟

Release： 2017-01-20 15:30:06

Original

1391 people have browsed it

In this chapter, we will introduce the gripper cursor in swiper, which is to change the style of our cursor on the swiper page.

The first step is to build a basic swiper page layout.

<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>

Copy after login

Let’s not forget to style the page. Because I am here for demonstration, it is simpler.

<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>

Copy after login

Set the width of the outer container to 100% and the height to 300px.
Then set the page content to be vertically and horizontally centered.
Then go to the js part for initialization.

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

Copy after login

Here we set the page group display, so the page width will automatically divide the width of the external container, and the page height is still 300px.
Then we change the cursor style to the gripper cursor and you can see that it is still an attribute and the effect is achieved, which is very convenient.

The above is the basic use of swiper (11). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!