swiper 滑动插件

最新推荐文章于 2024-04-19 22:39:11 发布

weixin_33712881

最新推荐文章于 2024-04-19 22:39:11 发布

阅读量70

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2605948/blog/761473

版权

2019独角兽企业重金招聘Python工程师标准>>>

`<!DOCTYPE html>

<html> <head> <title>jQuery WeUI</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<style>
  .swiper-container {
    width: 100%;
	height: 100%;
  } 

  .swiper-container img {
    display: block;
    width: 100%;
	height:100%;
  }
</style>

</head>

<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="./images/swiper-1.jpg" /></div>
    <div class="swiper-slide"><img src="./images/swiper-2.jpg" /></div>
    <div class="swiper-slide"><img src="./images/swiper-3.jpg" /></div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
</div>

<script src="../lib/jquery-2.1.4.js"></script>

<script src="../js/swiper.js"></script>

<script>
  $(".swiper-container").swiper({
    loop: true,
    autoplay: 3000,
	effect : 'fade',
	//autoplayDisableOnInteraction :false,
	//autoHeight: true, //高度随内容变化,
	//slidesPerColumn : 2,
	direction: 'vertical'
  });

</script>

</body> </html> `

转载于:https://my.oschina.net/u/2605948/blog/761473