jQuery插件Swiper 极其强大的移动端PC端滑块

Swiper是一款免费和超级轻量的适用于多种设备的的滑块幻灯片插件,可适用于移动网站,移动APP和移动本地APP,插件原为IOS设计,也可以在Android,Windows Phone 8和现代桌面浏览器上使用。

jQuery插件Swiper 极其强大的移动端PC端滑块

jquery实例:Swiper使用方法

引入核心文件,可以不需要jquery的,但jQ酷习惯了jquery,所以还是引入了。

<link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
<script defer src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js "></script>
<script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script>

写入html

<div class="swiper-container">
  <div class="swiper-wrapper">      <!--First Slide-->
      <div class="swiper-slide"> 
        <!--  这里写入你需要的任意html内容 -->
      </div>      
      <!--Second Slide-->
      <div class="swiper-slide">        
      <!-- Any HTML content of the second slide goes here -->
      </div>      
      <!--Third Slide-->
      <div class="swiper-slide"> 
        <!-- Any HTML content of the third slide goes here -->
      </div>      
      <!--Etc..-->
  </div>
</div>

打开 idangerous.swiper.css ,在文件最后修改Swiper's 的宽和高

/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

写入JS,初始化插件

<script type="text/javascript">
  /*======
  Use document ready or window load events
  For example:
  With jQuery: $(function() { ...code here... })
  Or window.onload = function() { ...code here ...}
  Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
  =======*/
  
  //无jquery
  window.onload = function() {
    var mySwiper = new Swiper('.swiper-container',{
      //Your options here:
      mode:'horizontal',
      loop: true
      //etc..
    });  
  }
   
  /*
  使用jquery
  */
  $(function(){
    var mySwiper = $('.swiper-container').swiper({
      //Your options here:
      mode:'horizontal',
      loop: true
      //etc..
    });
  })
</script>

函数

  • mySwiper.disableMousewheelControl() – 关闭鼠标滚轮控制

  • mySwiper.enableMousewheelControl() – 开启鼠标滚轮控制

  • mySwiper.enableKeyboardControl() – 开启按键控制

  • mySwiper.disableKeyboardControl() – 关闭按键控制

  • mySwiper.swipeNext() – 变形到下一个slide

  • mySwiper.swipePrev() – 变形到上一个slide

  • mySwiper.swipeTo(index, speed, runCallbacks) – 跳转到index值的slide,speed为跳转的速度,runCallbacks为跳转后回调的涵数

  • mySwiper.browser.ie10 – 如果是IE10返回true

  • mySwiper.browser.ie8 – 如果是IE8返回true

  • mySwiper.support.touch –如果支持触屏事件返回true

  • mySwiper.support.transforms -如果支持CSS3变型返回true

  • mySwiper.support.transforms3d – 如果支持CSS3 3D变型返回true

  • mySwiper.support.transitions – 如果支持CSS3返回true

  • mySwiper.activeSlide() – 返回当前slide的内容

  • mySwiper.clickedSlideIndex – 返回单击或触摸后的slide的index值. 便于 "onSlideTouch" 和"onSlideClick" 调用

  • mySwiper.clickedSlide – 返回单击或触摸后的slide的内容. 便于 "onSlideTouch" 和"onSlideClick" 调用.

  • mySwiper.activeIndex – 返回当前slide的index值.

  • mySwiper.activeLoopIndex – 在循环模式下返回当前slide的index值.

  • mySwiper.activeLoaderIndex – 在加载模式下返回当前slide的index值.

  • mySwiper.previousIndex – 返回上一个slide的index值.

  • mySwiper.startAutoplay() – 开始自动播放.

  • mySwiper.stopAutoplay() – 停止自动播放.

  • mySwiper.destroy( removeResizeEvent ) – 将删除所有附加事件侦听器

  • mySwiper.resizeFix() – 在slide改变大小窗口没有变时调用此函数.

  • mySwiper.reInit() – 初始化 Swiper. 用于动态添加或删除 slides.

  • mySwiper.width – 返回swiper容器的宽度

  • mySwiper.height – 返回swiper容器的高度

  • mySwiper.isTouched – 当触摸slide时返回true

  • mySwiper.positions -返对对象容器的x轴与y轴值

  • mySwiper.touches -返回对象的信息

  • mySwiper.params – 访问对象与传递的参数初始化.初始化后你可以重定义参数, 像mySwiper.params.speed=500

  • mySwiper.getWrapperTranslate(axis) – 返回对象容器的变形偏移量,像素为单位。 "translate"/offset (in px). "axis" – 为字符 "x"(横屏) 或 "y" (f直屏)

  • mySwiper.setWrapperTranslate(x,y,z) -手动给对象容器设定CSS3的转换数值,单位为像素

  • mySwiper.wrapperTransitionEnd(callback,permanent) – 自定义回调函数,在transitionEnd”事件后触发


参数类型默认值例子 
speednumber300600
eventTargetstring'wrapper''container'
autoplaynumber5000
autoplayDisableOnInteractionbooleantruefalse
autoplayStopOnLastbooleanfalsetrue
modestring'horizontal''vertical'
loopbooleanfalsetrue
loopAdditionalSlidesnumber02
loopedSlidesnumber12
slidesPerViewnumber or 'auto'14
slidesPerViewFitbooleantruefalse
slidesPerGroupnumber12
calculateHeightbooleanfalsetrue
roundLengthsbooleanfalsetrue
cssWidthAndHeightbooleanfalsetrue
updateOnImagesReadybooleantruefalse
releaseFormElementsbooleantruefalse
watchActiveIndexbooleanfalsetrue
visibilityFullFitbooleanfalsetrue
autoResizebooleantruefalse
resizeReInitbooleanfalsetrue
DOMAnimationbooleantruefalse
resistanceboolean or '100%'truefalse
noSwipingbooleanfalsetrue
preventLinksbooleantruefalse
preventLinksPropagationbooleanfalsetrue
initialSlidenumber20
useCSS3Transformsbooleantruefalse
Free Mode and Scroll Container
freeModebooleanfalsetrue
freeModeFluidbooleanfalsetrue
scrollContainerbooleanfalsetrue
momentumRationumber12
momentumBouncebooleantruefalse
momentumBounceRationumber12
Slides offset
centeredSlidesbooleanfalsetrue
offsetPxBeforenumber0100
offsetPxAfternumber0100
offsetSlidesBeforenumber02
offsetSlidesAfternumber02
Touch/mouse interactions
touchRationumber10.8
simulateTouchbooleantruefalse
onlyExternalbooleanfalsetrue
followFingerbooleantruefalse
grabCursorbooleanfalsetrue
shortSwipesbooleantruefalse
longSwipesRationumber0.50.3
moveStartThresholdnumberfalse100
swipeToNextbooleantruefalse
swipeToPrevbooleantruefalse
Navigation
keyboardControlbooleanfalsetrue
mousewheelControlbooleanfalsetrue
mousewheelControlForceToAxisbooleanfalsetrue
分页
paginationstring or HTML Element'.my-pagination'
paginationClickablebooleanfalsetrue
paginationAsRangebooleantrue

createPaginationbooleantruefalse
Namespace
wrapperClassstring'swiper-wrapper''my-wrapper'
slideClassstring'swiper-slide''my-slide'
slideActiveClassstring'swiper-slide-active''my-active-slide'
slideVisibleClassstring'swiper-slide-visible''my-visible-slide'
slideElementstring'div''li'
noSwipingClassstring'swiper-no-swiping''stop-swiping'
paginationElementstring'span''div'
paginationElementClassstring'swiper-pagination-switch''my-switch'
paginationActiveClassstring'swiper-active-switch''my-active-switch'
paginationVisibleClassstring'swiper-visible-switch''my-visible-switch'
回调
queueStartCallbacksbooleanfalsetrue
queueEndCallbacksbooleanfalsetrue
onFirstInitfunctionfunction(swiper){ do something }
onInitfunctionfunction(swiper){ do something }
onSwiperCreatedfunctionfunction(swiper){ do something }
onTouchStartfunctionfunction(swiper){ do something }
onTouchMovefunctionfunction(swiper){ do something }
onTouchEndfunctionfunction(swiper){ do something }
onSlideResetfunctionfunction(swiper){ do something }
onSlideChangeStartfunctionfunction(swiper, direction){ do something }
onSlideChangeEndfunctionfunction(swiper, direction){ do something }
onSlideNextfunctionfunction(swiper){ do something }
onSlidePrevfunctionfunction(swiper){ do something }
onSlideClickfunctionfunction(swiper){ do something }
onSlideTouchfunctionfunction(swiper){ do something }
onImagesReadyfunctionfunction(swiper){ do something }
onMomentumBouncefunctionfunction(swiper){ do something }
onResistanceBeforefunctionfunction(swiper,p){ do something }
onResistanceAfterfunctionfunction(swiper,p){ do something }
onSetWrapperTransitionfunctionfunction(swiper, duration){ do something }
onSetWrapperTransformfunctionfunction(swiper, transform){ do something }
$(document).ready(function(){
  var mySwiper = new Swiper('.swiper-container',{
    mode:'vertical',
    speed: 600,    onSlideChangeStart: function(swiper){
      alert('Hello 1');
    }
  });  
});

更多方法请参考官方文档。


未经允许请勿转载:程序喵 » jQuery插件Swiper 极其强大的移动端PC端滑块

点  赞 (1) 打  赏
分享到: