素材8网-专注前端素材！
来源：https://www.sucai8.cn/39389.html

jQuery手机触屏滑动的响应式图片轮播效果

  • 1314
  • 0
  • 0

手机触摸滑动焦点图，图片切换特效。

JS部分
  1. <script>
  2. $('#pbSlider0').pbTouchSlider({
  3.     slider_Wrap : '#yourId', // Assign a unique ID to the div.o-sliderContainer
  4.     slider_Item : '.o-slider--item', // Single Item
  5.     slider_Drag : true, // Your choise.. to dragIt or not to dragIt..this is the question...
  6.     slider_Dots : { // Wanna see dots or not?
  7.       class :'.o-slider-pagination',
  8.       enabled : true
  9.     },
  10.     slider_Arrows : { // Wanna see Arrows or not?
  11.       class :'.o-slider-arrows',
  12.       enabled : true
  13.     },
  14.     slider_Threshold : 25, // Percentage of  dragX before go to next/prev slider
  15.     slider_Speed : 1000,
  16.     slider_Ease : 'cubic-bezier(0.5, 0, 0.5, 1)',  // see http://cubic-bezier.com/
  17.     slider_Breakpoints : { // Kind of media queries ( can add more if you know how to do it :D and if you need )
  18.         default : {
  19.             height : 500 //  height on desktop
  20.         },
  21.         tablet : {
  22.             height : 400, // height on tablet
  23.             media : 1024 // tablet breakpoint
  24.         },
  25.         smartphone : {
  26.             height : 300, // height on smartphone
  27.             media : 768 // smartphone breakpoint
  28.         }
  29.     }
  30. });
  31. </script>
复制代码

引用库

  • Hammer.js /单和多点触控手势库
  • Lea Verou - cubic-bezier /CSS3 的缓动功能
  • Daniel Bruce - entypo  /字体图标
  • jQuery / JS框架
相关素材
jQuery手机触屏滑动的响应式图片轮播效果
  • 元气赵老师 刚刚下载了一个素材
  • 百运渡化工 刚刚下载了一个素材
  • 麦克斯韦的银色锤子 刚刚下载了一个素材
  • 韩跑跑 刚刚下载了一个素材
  • ayaaff 刚刚下载了一个素材
  • qq作怪ErO 刚刚下载了一个素材
  • qqMilesNpP 刚刚下载了一个素材
  • qqWatergnn 刚刚下载了一个素材
  • 平安喜樂 刚刚下载了一个素材
  • 哆啦A梦9 刚刚下载了一个素材
  • 通境 刚刚下载了一个素材
  • qq哈喽c6X 刚刚下载了一个素材
  • 伴梦伴醒 刚刚下载了一个素材
  • 墨言555 刚刚下载了一个素材
  • 丰祺 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题