注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

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

媒体 fishcity 23083浏览

移动滑块jquery插件Swiper

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

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”事件后触发

参数 类型 默认值 例子  
speed number 300 600  
eventTarget string 'wrapper' 'container'  
autoplay number 5000  
autoplayDisableOnInteraction boolean true false  
autoplayStopOnLast boolean false true  
mode string 'horizontal' 'vertical'  
loop boolean false true  
loopAdditionalSlides number 0 2  
loopedSlides number 1 2  
slidesPerView number

       or

       'auto'

1 4  
slidesPerViewFit boolean true false  
slidesPerGroup number 1 2  
calculateHeight boolean false true  
roundLengths boolean false true  
cssWidthAndHeight boolean false true  
updateOnImagesReady boolean true false  
releaseFormElements boolean true false  
watchActiveIndex boolean false true  
visibilityFullFit boolean false true  
autoResize boolean true false  
resizeReInit boolean false true  
DOMAnimation boolean true false  
resistance boolean

       or

       '100%'

true false  
noSwiping boolean false true  
preventLinks boolean true false  
preventLinksPropagation boolean false true  
initialSlide number 2 0  
useCSS3Transforms boolean true false  
Free Mode and Scroll Container
freeMode boolean false true  
freeModeFluid boolean false true  
scrollContainer boolean false true  
momentumRatio number 1 2  
momentumBounce boolean true false  
momentumBounceRatio number 1 2  
Slides offset
centeredSlides boolean false true  
offsetPxBefore number 0 100  
offsetPxAfter number 0 100  
offsetSlidesBefore number 0 2  
offsetSlidesAfter number 0 2  
Touch/mouse interactions
touchRatio number 1 0.8  
simulateTouch boolean true false  
onlyExternal boolean false true  
followFinger boolean true false  
grabCursor boolean false true  
shortSwipes boolean true false  
longSwipesRatio number 0.5 0.3  
moveStartThreshold number false 100  
swipeToNext boolean true false  
swipeToPrev boolean true false  
Navigation
keyboardControl boolean false true  
mousewheelControl boolean false true  
mousewheelControlForceToAxis boolean false true  
分页
pagination string or HTML Element '.my-pagination'  
paginationClickable boolean false true  
paginationAsRange boolean true  
createPagination boolean true false  
Namespace
wrapperClass string 'swiper-wrapper' 'my-wrapper'  
slideClass string 'swiper-slide' 'my-slide'  
slideActiveClass string 'swiper-slide-active' 'my-active-slide'  
slideVisibleClass string 'swiper-slide-visible' 'my-visible-slide'  
slideElement string 'div' 'li'  
noSwipingClass string 'swiper-no-swiping' 'stop-swiping'  
paginationElement string 'span' 'div'  
paginationElementClass string 'swiper-pagination-switch' 'my-switch'  
paginationActiveClass string 'swiper-active-switch' 'my-active-switch'  
paginationVisibleClass string 'swiper-visible-switch' 'my-visible-switch'  
回调
queueStartCallbacks boolean false true  
queueEndCallbacks boolean false true  
onFirstInit function function(swiper){ do something }  
onInit function function(swiper){ do something }  
onSwiperCreated function function(swiper){ do something }  
onTouchStart function function(swiper){ do something }  
onTouchMove function function(swiper){ do something }  
onTouchEnd function function(swiper){ do something }  
onSlideReset function function(swiper){ do something }  
onSlideChangeStart function function(swiper, direction){ do something }  
onSlideChangeEnd function function(swiper, direction){ do something }  
onSlideNext function function(swiper){ do something }  
onSlidePrev function function(swiper){ do something }  
onSlideClick function function(swiper){ do something }  
onSlideTouch function function(swiper){ do something }  
onImagesReady function function(swiper){ do something }  
onMomentumBounce function function(swiper){ do something }  
onResistanceBefore function function(swiper,p){ do something }  
onResistanceAfter function function(swiper,p){ do something }  
onSetWrapperTransition function function(swiper, duration){ do something }  
onSetWrapperTransform function function(swiper, transform){ do something }  
$(document).ready(function(){
  var mySwiper = new Swiper('.swiper-container',{
    mode:'vertical',
    speed: 600,    onSlideChangeStart: function(swiper){
      alert('Hello 1');
    }
  });  
});

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

转载请注明:jQ酷 » 极其强大的移动端PC端滑块jquery插件Swiper

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。