今天咱们来说一下.Swiper轮播图.
超级简单的:
翠花,上代码:
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Swiper demo</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> | |
<!-- Link Swiper's CSS --> | |
<link rel="stylesheet" href="../dist/css/swiper.min.css"> | |
<!-- Demo styles --> | |
<style> | |
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 { | |
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; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Swiper --> | |
<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 class="swiper-slide">Slide 4</div> | |
<div class="swiper-slide">Slide 5</div> | |
<div class="swiper-slide">Slide 6</div> | |
<div class="swiper-slide">Slide 7</div> | |
<div class="swiper-slide">Slide 8</div> | |
<div class="swiper-slide">Slide 9</div> | |
<div class="swiper-slide">Slide 10</div> | |
</div> | |
<!-- Add Pagination --> | |
<div class="swiper-pagination"></div> | |
</div> | |
<!-- Swiper JS --> | |
<script src="../dist/js/swiper.min.js"></script> | |
<!-- Initialize Swiper --> | |
<script> | |
var swiper = new Swiper('.swiper-container', { //小白点 |
|
pagination: '.swiper-pagination', | |
paginationClickable: true | |
}); | |
</script> | |
</body> | |
</html> |
最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!