今天咱们来说一下.Swiper轮播图.
超级简单的:
翠花,上代码:
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Swiper demo
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
html, body {
Copier après la connexion
position: relative;
Copier après la connexion
height: 100%;
Copier après la connexion
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
body {
Copier après la connexion
background: #eee;
Copier après la connexion
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
Copier après la connexion
font-size: 14px;
Copier après la connexion
color:#000;
Copier après la connexion
margin: 0;
Copier après la connexion
padding: 0;
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
.swiper-container {
Copier après la connexion
width: 100%;
Copier après la connexion
height: 100%;
Copier après la connexion
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
.swiper-slide {
Copier après la connexion
text-align: center;
Copier après la connexion
font-size: 18px;
Copier après la connexion
background: #fff;
Copier après la connexion
/* Center slide text vertically */
Copier après la connexion
display: -webkit-box;
Copier après la connexion
display: -ms-flexbox;
Copier après la connexion
display: -webkit-flex;
Copier après la connexion
display: flex;
Copier après la connexion
-webkit-box-pack: center;
Copier après la connexion
-ms-flex-pack: center;
Copier après la connexion
-webkit-justify-content: center;
Copier après la connexion
justify-content: center;
Copier après la connexion
-webkit-box-align: center;
Copier après la connexion
-ms-flex-align: center;
Copier après la connexion
-webkit-align-items: center;
Copier après la connexion
align-items: center;
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Slide 1
Copier après la connexion
Slide 2
Copier après la connexion
Slide 3
Copier après la connexion
Slide 4
Copier après la connexion
Slide 5
Copier après la connexion
Slide 6
Copier après la connexion
Slide 7
Copier après la connexion
Slide 8
Copier après la connexion
Slide 9
Copier après la connexion
Slide 10
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
var swiper = new Swiper('.swiper-container', {//小白点
Copier après la connexion
pagination: '.swiper-pagination',
Copier après la connexion
paginationClickable: true
Copier après la connexion
});
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!
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!