今天咱们来说一下.Swiper轮播图.
超级简单的:
翠花,上代码:
<br>
html>
<meta>
<title>Swiper demo</title>
<meta>
<!-- Link Swiper's CSS -->
<link>
<!-- Demo styles -->
<style></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;
}
<!-- Swiper -->
<p></p>
<p></p>
<p>Slide 1</p>
<p>Slide 2</p>
<p>Slide 3</p>
<p>Slide 4</p>
<p>Slide 5</p>
<p>Slide 6</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/js/7951" title="JS体育赛事网站幻灯片代码"><img src="https://img.php.cn/upload/jscode/000/000/014/170892180322011.jpg" alt="JS体育赛事网站幻灯片代码" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/js/7951" title="JS体育赛事网站幻灯片代码" class="overflowclass">JS体育赛事网站幻灯片代码</a> <p class="overflowclass">JS体育赛事网站幻灯片代码是一款使用Swiper插件制作的FIFA足球世界游戏特色图片剪辑的幻灯片展示代码。</p> </div> <a rel="nofollow" href="/xiazai/js/7951" title="JS体育赛事网站幻灯片代码" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
<p>Slide 7</p>
<p>Slide 8</p>
<p>Slide 9</p>
<p>Slide 10</p>
<!-- Add Pagination -->
<p></p>
<!-- Swiper JS -->
<script></script>
<!-- Initialize Swiper -->
<script></script>
var swiper = new Swiper('.swiper-container', {//小白点
pagination: '.swiper-pagination',
paginationClickable: true
});
最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦!
