Utilisation de base du swiper (11)-tutoriel HTML-php.cn

Utilisation de base du swiper (11)

黄舟

Libérer： 2017-01-20 15:30:06

original

1389 Les gens l'ont consulté

Dans ce chapitre, nous présenterons le curseur de préhension dans le swiper, qui consiste à changer le style de notre curseur sur la page du swiper.

La première étape consiste à créer une mise en page de base pour le 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>

Copier après la connexion

N'oublions pas de styliser la page Parce que je suis là pour une démonstration, c'est plus simple.

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

Copier après la connexion

Réglez la largeur du conteneur extérieur sur 100 % et la hauteur sur 300 px.
Ensuite, définissez le contenu de la page pour qu'il soit centré verticalement et horizontalement.
Ensuite rendez-vous dans la partie js pour l'initialisation.

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

Copier après la connexion

Ici, nous définissons l'affichage du regroupement de pages, de sorte que la largeur de la page divisera automatiquement la largeur du conteneur externe et que la hauteur de la page est toujours de 300 px.
Ensuite, nous changeons le style du curseur en curseur main et vous pouvez voir qu'il s'agit toujours d'un attribut et l'effet est obtenu, ce qui est très pratique.

Ce qui précède est le contenu de l'utilisation de base de swiper (11). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !