Swiper插件各种好用的图片旋转木马功能 简单易用内含多种调用demo

demo用例

引入css和js文件

<script src="js/jquery-1.10.1.min.js"></script>
<script src="../dist/idangerous.swiper.min.js"></script>

html部分

<div class="device">
    <a class="arrow-left" href="#"></a> 
    <a class="arrow-right" href="#"></a>
    <div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
			<div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
			<div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
		</div>
    </div>
    <div class="pagination"></div>
</div>

调用

<script>
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
  $('.arrow-left').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
  })
  $('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
  })
  </script>