Maison >interface Web >tutoriel HTML >Utilisation de base du swiper (11)
Utilisation de base du swiper (11)
- 黄舟original
- 2017-01-20 15:30:061409parcourir
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>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>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('.swiper-container',{
pagination:'.swiper-pagination',
paginationClickable:true,
spaceBetween:30,
slidesPerView:3,
grabCursor:true //开启抓手光标
});
</script>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) !