Maison > Article > interface Web > Comment implémenter une rotation automatique et illimitée des images avec swiper
Comment implémenter une rotation automatique et illimitée des images avec swiper
- php中世界最好的语言original
- 2018-05-28 14:13:266452parcourir
Cette fois, je vais vous montrer comment mettre en œuvre une rotation automatique illimitée des images avec swiper. Quelles sont les précautions pour mettre en œuvre une rotation automatique illimitée des images avec swiper. Voici des cas pratiques, jetons un coup d'œil.
Code complet
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css" rel="external nofollow" >
<script src="swiper/js/swiper-3.4.2.min.js"></script>
<style type="text/css">
.swiper-container {
width: 900px;
height: 300px;
}
</style>
</head>
<body>
<p class="swiper-container">
<p class="swiper-wrapper">
<p class="swiper-slide box1"><img src="img/a.jpg"></p>
<p class="swiper-slide box2" ><img src="img/b.jpg"></p>
<p class="swiper-slide box3"><img src="img/c.jpg"></p>
</p>
<!-- 如果需要分页器 -->
<p class="swiper-pagination"></p>
<!-- 如果需要导航按钮 -->
<p class="swiper-button-prev"></p>
<p class="swiper-button-next"></p>
<!-- 如果需要滚动条 -->
<!--<p class="swiper-scrollbar"></p>-->
</p>
</p>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay : 1000,
speed:100,
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
})
</script>
</body>
</html>
Comment utiliser swiper pour écrire un carrousel
Tout le monde a déjà écrit un carrousel, je crois que vous écrivez un carrousel En train de dessiner, j'ai dû m'inquiéter de certains détails. Ensuite, je vais vous parler d'un graphique carrousel pratique et rapide !
Swiper est souvent utilisé pour le glissement tactile de contenu sur des sites Web mobiles
1 La première étape consiste à introduire le plug-in css---swiper.css et JQ---swiper. js,
Puis j'ai commencé à écrire des images de carrousel
<p class="swiper-container">--首先定义一个容器 <p class="swiper-wrapper"> <p class="swiper-slide"><img src="" /></p> --添加图片 <p class="swiper-slide"><img src="" /></p> <p class="swiper-slide"><img src="" /></p> </p> <p class="swiper-pagination"></p>--小圆点分页器 <p class="swiper-button-prev"></p>--上一页 <p class="swiper-button-next"></p>--下一页 </p>
Si vous voulez qu'il bouge, continuez à écrire js
var mySwiper = new Swiper(".swiper-container",{
autoplay:1000,--每秒中轮播一次
loop:true,--可以让图片循环轮播
autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播
pagination:".swiper-pagination",--让小圆点显示
paginationClickable:true,--实现小圆点点击
prevButton:".swiper-button-prev",--实现上一页的点击
nextButton:".swiper-button-next",--实现下一页的点击
effect:"flip"--可以实现3D效果的轮播
})
Le carrousel Swiper a également Ses avantages :
1. Swiper est un plug-in d'effets spéciaux coulissants créé uniquement avec javascript, ciblant les terminaux mobiles tels que les téléphones mobiles et les tablettes.
2.Swiper peut obtenir des effets courants tels que l'image de mise au point de l'écran tactile, la commutation des onglets de l'écran tactile, la commutation multi-images de l'écran tactile et d'autres effets courants.
3.Swiper est open source, gratuit, stable, simple à utiliser et puissant. C'est un choix important pour créer des sites Web de terminaux mobiles !
Il y a aussi des défauts : (lors de l'utilisation de la requête ajax du plug-in du carrousel Swiper pour charger des images, le problème ne peut pas être glissé)
Parce que l'image de la bannière est créée dynamiquement, lorsque le plug-in commence à initialiser, il n'y a rien de tel dans le flux de documents. Les images sont utilisées, donc la largeur correspondante n'est pas créée. En ajustant l'ordre de chargement js, le problème n'est toujours pas résolu.
Enfin trouvé l'API du plug-in swiper, qui a des attributs qui peuvent automatiquement initialiser le plug-in en fonction du contenu. Après avoir ajouté un observateur : c'est vrai, le problème est résolu !
var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})
Swiper possède de riches interfaces API. (Mais il n'y a pas beaucoup de documents chinois, donc je n'ai pas pu les trouver.) Il permet aux développeurs de générer leur propre pagination unique, des boutons de curseur haut et bas
et 4 fonctions de rappel : 1.onTouchStart
2.onTouchMove
3.onTouchEnd
4.onSlideSwitch.
Le contenu ci-dessus est mon résumé personnel, j'espère qu'il vous sera utile !
graphique du carrousel swiper (la commutation automatique inversée est similaire à une boucle infinie)
graphique du carrousel du plug-in swiper, l'ordre du carrousel par défaut est de droite à gauche, non . Une image, la deuxième image, la troisième image, et ensuite vous pouvez voir à l'œil nu que vous revenez de la troisième image de gauche à droite jusqu'à la première image,
<.>, mais il peut toujours être utilisé. Les caractéristiques du swiper lui-même sont modifiées en un carrousel à boucle infinie. Code HTML<p class="course-banner-box"> <p class="swiper-container"> <p class="swiper-wrapper"> <!--四张轮播图--> <p class="swiper-slide slide1"></p> <p class="swiper-slide slide2"></p> <p class="swiper-slide slide3"></p> <p class="swiper-slide slide4"></p> </p> <!-- Add Pagination --> <p class="swiper-pagination"></p> <!-- Add Arrows --> <p class="button-box"> <p class="button"> <!--左右按钮--> <p class="swiper-button-next"></p> <p class="swiper-button-prev"></p> </p> </p> </p> </p>code de script
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',//pagination分页器
nextButton: '.swiper-button-next',//前进后退按钮
prevButton: '.swiper-button-prev',
paginationClickable: true,//参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
spaceBetween: 30,//slide之间的距离（单位px）。
centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
loop : true,//复制多份循环(这里就是让轮播看起来是循环的，去掉这个就恢复了默认的swiper轮播)
autoplay: 3000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
autoplayDisableOnInteraction: false//点击后打断auto-play
});
</script>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez payer. attention aux autres articles connexes sur le site php chinois ! Lecture recommandée :
Comment utiliser swiper dans vue
Comment encapsuler les requêtes réseau angulaires
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!