swiper 滑動插件

時間 2019-11-11

標籤 swiper 滑動插件简体版

原文原文鏈接

`<!DOCTYPE html>css

<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">html

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

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

</head>ide

<body ontouchstart>oop

<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> `this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。