Cuihua, the code:
Swiper demo
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
var swiper = new Swiper('.swiper-container', {//小白点
pagination: '.swiper-pagination',
paginationClickable: true
});
Finally, don’t forget to type these again You need to import Swiper.css and Swiper.js plug-ins before doing anything!
The above is the detailed content of Swiper carousel image source code sharing analysis. For more information, please follow other related articles on the PHP Chinese website!