功能齐全的跨平台轮播插件-jSlider

j Slider是一个简单，快速，响应快速，支持触摸的jQuery滑块/轮播/幻灯片演示插件，可通过CSS和HTML数据属性完全自定义。

更多功能：

• 导航箭头。
• 分页子弹。
• 可拖动的幻灯片。
• 自动播放模式。
• 可配置的淡入淡出/滑动过渡。
• 动画内容（5个动画）。
• 无限循环。
• 将幻灯片分组，就像画廊一样。
• 有用的API方法和事件。

如何使用它：

1.在页面上包括jQuery jSlider插件和其他必需的资源。

<link rel="stylesheet" href="jSlider.css">
<script src="jquery-latest.min.js"></script>
<script src="jquery.jSlider.js"></script>

2.对于响应式布局，您需要具有“视口”元设置。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

3.此jSlider是使用DIV标签生成的。您将需要一个具有类名称“ jSlider”的包装器。

<div id="slider-example" class="jSlider">
  <div><img src="1.jpg" alt="" /></div>
  <div><img src="2.jpg" alt="" /></div>
  <div>
    <img src="3.jpg" alt="" />
    <div class="sub-content-sample">
      <p>Slide Content</p>
    </div>
  </div>
  <div><img src="4.jpg" alt="" /></div>
  <div><img src="5.jpg" alt="" /></div>
  <div><img src="6.jpg" alt="" /></div>
</div>

4.就这样。您可以使用以下data属性来自定义滑块：

数据导航：显示上一个/下一个按钮。可以将其设置为“始终”，“无”或“悬停”。默认设置为“悬停”，这意味着当用户将鼠标悬停在滑块上时，这些按钮将出现。在移动设备上，“悬停”等于“无”。
数据指示器：在滑块底部显示分页符号。可以将其设置为“始终”，“无”或“悬停”。
默认情况下设置为“始终”。在移动设备上，“悬停”等于“无”。
data-speed：转换速度，以毫秒为单位。默认值为“ 500”。
数据延迟：滑块每次转换之间的自动播放延迟时间，以毫秒为单位。默认值为“ 5000”。（5秒）。如果您不希望自动播放，请将其设置为“ 0”（零）
data-transition：滑块的过渡类型。可以将其设置为“幻灯片”（默认）或“淡入淡出”。
数据循环：启用无限循环。如果设置为“ true”，则当滑块到达末尾时，下一张幻灯片将是第一张幻灯片。反之亦然。
数据组：管理幻灯片组。您将在每张幻灯片中定义元素组。这是图库模式的特殊属性。在“淡入淡出”过渡中，该值始终为“ 1”。默认值为“ 1”。

<div id="slider-example" 
     class="jSlider" 
     data-loop="true"
     ata-navigation="always" 
     data-indicator="none">
     ...
</div>

5.如果您希望在幻灯片处于活动状态时获得一些精美且简单的动画内容，请向元素添加一些特殊的类，如下所示。

<div id="slider-example" class="jSlider">
  <div><img src="1.jpg" alt="" /></div>
  <div class="selected">
    <h3 class="appear-top">This is the slide title!</h3>
    <h4 class="appear-right">This can be moved after the slide is showed...</h4>
    <p  class="appear-left">...in different directions...</p>
    <p  class="appear-bottom">...and with different animation effects</p>
    <h5 class="appear-fade">powered by jSlider!</h5>
    <img src="2.jpg" alt="" />
  </div>
  <div>
    <img src="3.jpg" alt="" />
    <div class="sub-content-sample">
      <p>Slide Content</p>
    </div>
  </div>
  <div><img src="4.jpg" alt="" /></div>
  <div><img src="5.jpg" alt="" /></div>
  <div><img src="6.jpg" alt="" /></div>
</div>

6.您还可以使用JavaScript使用可选设置来初始化插件：

$('#slider-example').sliderInit({
  'navigation': 'hover', 
  'indicator': 'always', 
  'speed': 500, 
  'delay': 5000, 
  'transition': 'slide', 
  'loop': false, 
  'group': 1
});

7. API方法。

// stops the slider
$('#slider-example').sliderStop();

// go to next or previous slide.
// go forward 1, go backward -1
$('#slider-example').sliderGo(direction);

// go to a specific slide
$('#slider-example').sliderUp<a href="https://www.jqueryscript.net/time-clock/">date</a>(index);

8.活动可用。

// stops the slider
$('#slider-example').sliderStop();

// go to next or previous slide.
// go forward 1, go backward -1
$('#slider-example').sliderGo(direction);

// go to a specific slide
$('#slider-example').sliderUpdate(index);