今天咱们来说一下.Swiper轮播图.
超级简单的:
翠花,上代码:
<br>
登录后复制
<!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?1.1.11">
登录后复制
<!-- 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 {登录后复制
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;
登录后复制
}
登录后复制
登录后复制
登录后复制
登录后复制
</style>
登录后复制
</head>
登录后复制
<body>
登录后复制
<!-- Swiper -->
登录后复制
<p class="swiper-container">
登录后复制
<p class="swiper-wrapper">
登录后复制
<p class="swiper-slide">Slide 1</p>
登录后复制
<p class="swiper-slide">Slide 2</p>
登录后复制
<p class="swiper-slide">Slide 3</p>
登录后复制
<p class="swiper-slide">Slide 4</p>
登录后复制
<p class="swiper-slide">Slide 5</p>
登录后复制
<p class="swiper-slide">Slide 6</p>
登录后复制
<p class="swiper-slide">Slide 7</p>
登录后复制
<p class="swiper-slide">Slide 8</p>
登录后复制
<p class="swiper-slide">Slide 9</p>
登录后复制
<p class="swiper-slide">Slide 10</p>
登录后复制
</p>
登录后复制
登录后复制
<!-- Add Pagination -->
登录后复制
<p class="swiper-pagination"></p>
登录后复制
</p>
登录后复制
登录后复制
<!-- Swiper JS -->
登录后复制
<script src="../dist/js/swiper.min.js?1.1.11"></script>
登录后复制
<!-- Initialize Swiper -->
登录后复制
<script>
登录后复制
var swiper = new Swiper('.swiper-container', {//小白点登录后复制
pagination: '.swiper-pagination',
登录后复制
paginationClickable: true
登录后复制
});
登录后复制
</script>
登录后复制
</body>
登录后复制
</html>
登录后复制
最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!
以上就是Swiper轮播图源码分享解析的详细内容，更多请关注Work网其它相关文章！