jQuery滑块轮播图插件sliderx.js

 查看演示  website  立即下载

更新时间：2019-08-08 00:27:05

使用方法

需要调用在文件

<link rel="stylesheet" href="dist/slider-x.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="dist/slider-x.js"></script>

html

<div class="my-slide">
    <div class="h-300px slide-1"></div>
    <div class="h-500px slide-2"></div>
    <div class="h-500px slide-3"></div>
    <div class="h-500px slide-4"></div>
    <div class="h-500px slide-5"></div>
    <div class="h-500px slide-2"></div>
    <div class="h-500px slide-1"></div>
    <div class="h-500px slide-2"></div>
    <div class="h-500px slide-1"></div>
    <div class="h-500px slide-2"></div>
    <div class="h-500px slide-1"></div>
  </div>

js

$('.my-slide').pageflySlider({
      slidesToShow: 3,
      slidesToScroll: 1,
      gutter: 15,
      autoPlay: false,
      duration: '400',
      autoPlayDelay: 2000,
      loop: true,
      navStyle: 'nav-style-111',
      paginationStyle: 'pagination-style-3'
    })

所有可用选项（目前）

defaultOptions = {
  slidesToShow: 1,
  slidesToScroll: 1,
  gutter: 0,
  autoPlay: true,
  autoPlayDelay: 3000,
  duration: 450,
  loop: true,
  draggable: true,
  paginationStyle: 'pagination-style-1',
  navStyle: 'nav-style-1',
  adaptiveHeight: false,
  height: 400,
}

PREVIOUS:
NEXT:
jQuery评分、打分插件
页面滚动图片预览视觉差插件