可拖动的轮播插件（视频存在进度条，swiper插件）

查看演示立即下载

插件描述：可以拖拽实现切换图片，可以将图片和视频一起实现滑动。视频存在进度条，进度条完毕，实现切换

使用方法

css引用：

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="icons/entypo.css">

html:

<div class='o-sliderContainer' id="pbSliderWrap0" >
<!-- 视频： -->
 <div class='o-slider' id='pbSlider0'>
<div >
<video class='video'  autoplay muted loop >
<source src="images/Rallye.3gp" type="video/mp4">
</video>
<div >
<h1 >这是一个视频</h1>
<span ></span>
<h2 >自动播放</h2>
<span ></span>
<p >存在进度条 
</div>
   </div>
<!-- 图片： -->
   <div  data-image="images/1.jpg">
<div >
<h1 >这是图片</h1>
<span ></span>
<h2 >图片放data-image</h2>
<span ></span>
<p >6秒滑动
</div>
   </div>
     <div ></div>
</div>
</div>

js引用：

<script src="/"></script>
<script src='js/hammer.min.js'></script>
<script src='js/slider.js'></script>

js:

$('#pbSlider0').pbTouchSlider({
    slider_Wrap: '#pbSliderWrap0',
    slider_Threshold: 10,
    slider_Speed:600,
    slider_Ease:'ease-out',
    slider_Drag : true,//拖动
        auto:true,//是否自动滚动
        autoTime:6000,//设置图片自动时间
    slider_Arrows: {
      enabled : true//箭头
    },
    slider_Dots: {//显示点不
      class :'.o-slider-pagination',
      enabled : true,
      preview : false
    },
    slider_Breakpoints: {
        default: {
            height: 700//高度
        },
        tablet: {
            height: 500,
            media: 1024
        },
        smartphone: {//智能手机高度
            height: 400,
            media: 768
        }
    }
  });

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery图片左右滚动
下一个特效：动态数据表格插件ZBTable（原创）