头像

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

2019-09-09 10:07:14 收藏 来源:it素材网   浏览(238)   评论 ( 0 )   

Swiper插件各种好用的图片旋转木马功能 简单易用内含多种调用demo
Swiper插件各种好用的图片旋转木马功能 简单易用内含多种调用demo 非常实用
查看演示 下载资源:4 下载资源 下载积分:20

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>


声明:转载请注明来源(it素材网)并保留原文链接:https://www.itsucai.com/js/66.html
评论0

后面还有条评论,点击查看>>

系统已开启自动识别垃圾评论机制,识别到的自动封号!!!