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

响应式焦点图切换插件适应手机可以用手拖动

  • 2598
  • 1
  • 0

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jquey轮播图插件。

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

本素材被以下收藏专辑推荐:

相关素材
响应式焦点图切换插件适应手机可以用手拖动
  • qqDemO 刚刚下载了一个素材
  • qqTFIi 刚刚下载了一个素材
  • qq7bt4 刚刚下载了一个素材
  • qq六六d0j 刚刚下载了一个素材
  • 魍雍 刚刚下载了一个素材
  • 大川 刚刚下载了一个素材
  • 糖镜子 刚刚下载了一个素材
  • qqqq昵称xrr 刚刚下载了一个素材
  • 究极大笨P露秋紫 刚刚下载了一个素材
  • 才得始终 刚刚下载了一个素材
  • qqxDCJ 刚刚下载了一个素材
  • 李7 刚刚下载了一个素材
  • 七月11107786 刚刚下载了一个素材
  • qq平淡SyJ 刚刚下载了一个素材
  • 轻轻的来ka 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2026  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题