recherche

Maison >interface Web >js tutoriel >Introduction au plug-in swiper et comment carrousel d'images

Introduction au plug-in swiper et comment carrousel d'images

PHP中文网
PHP中文网original
2017-06-19 17:23:161755parcourir

swiper

Swiper est un plug-in d'effets spéciaux coulissants créé uniquement avec JavaScript, ciblant les téléphones mobiles, tablettes et autres terminaux mobiles.
Swiper peut obtenir des effets courants tels que l'image de mise au point de l'écran tactile, la commutation d'onglets sur l'écran tactile, la commutation multi-images sur l'écran tactile, etc.
Swiper est open source, gratuit, stable, simple à utiliser et puissant. C'est un choix important pour créer des sites Web sur terminaux mobiles !

1. Créez d'abord un environnement d'exploitation swiper. Les fichiers requis sont les fichiers swiper.min.js et swiper.min.css. 

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>
　　3989f20b29ca3784489ad4a92ad594dd2cacc6d41bbb37262a98f745aa00fbf0
73a6ac4ed44ffec12cee46588e518a5e

2. Écrivez du contenu HTML. 

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide">Slide 1</div>
　　　　<div class="swiper-slide">Slide 2</div>
　　　　<div class="swiper-slide">Slide 3</div>
　　</div>

　　<!-- 如果需要分页器 -->
　　<div class="swiper-pagination"></div>
</div>

3. Vous souhaiterez peut-être définir une taille pour Swiper, mais bien sûr non. 

.swiper-container {
　　width: 600px;
　　height: 300px;
}

4. Initialiser Swiper : de préférence à côté de la balise 36cc49f0c466276486e50c850b7e4956 (appel de fonction) 

3f1c4e4b6b16bbbd69b2ee476dc4f83a

　var swiper= new Swiper('.swiper-container',{
　　autoplay:1000,//Carrousel automatique
　　autoplayDisableOnInteraction:false,//Continuer le défilement après le glissement
　　loop:true,///Loop
　　pagination : '.swiper-pagination',//pagination
　　paginationClickable:true,//petit clic sur un point
　　espaceEntre:30,///espace entre les images
　　direction:"horizontal"//vertical horizontal par défaut
})

2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé de l'utilisation à haute fréquence des extensions de chaîne ES6Article suivant：Résumé de l'utilisation à haute fréquence des extensions de chaîne ES6

Articles Liés

Voir plus