Riot Slider是一个全新的jQuery滑块/旋转木马插件，用于以任何类型的方式呈现您的内容。

这是一个响应全面、移动友好的滑块，支持任何类型的内容，从图像到文本，从iframe到HTML5音频和视频。

它很容易上手，并具有许多功能，允许进行各种自定义。

如何使用它:

1.要启动ge，请在文档中加载riot-slider.css和riot-slider.js文件。

<!-- jQuery Riot Slider Plugin Files -->
<link rel="stylesheet" href="/riot-slider.min.css" />
<script src="/riot-slider.min.js"></script>

2.将幻灯片作为列表项添加到滑块中。该插件将使用的CSS类自动初始化所有HTML列表上的滑块防暴滑块.

<ul class="riot-slider">
  <li><img src="1.jpg" alt="Alt Text" /></li>
  <li>Text Here</li>
  <li>Any HTML Content Here</li>
</ul>

3.使用以下HTML数据属性配置Riot Slider：

• 数据操作控制台日志：如果设置了，信息将被添加到控制台日志中。默认值=false
• 数据使用材质图标：将材质图标用于播放、停止、上一个和下一个按钮。默认值=false
• 数据是自动播放的：启用自动播放。默认值=真
• 数据显示按钮：显示滑块控制按钮（数字、播放、暂停、上一个、下一个）。默认值=真
• 数据在触摸屏上滑动：启用触摸滑动。默认值=真
• 数据按钮编号显示：“never”=不显示数字按钮；“normal”=如果需要换行，则隐藏数字按钮；“始终”=始终显示数字按钮；默认值=正常
• 数据上一次下一次显示：“buttons”=在幻灯片编号和播放/暂停按钮附近显示上一个/下一个按钮；“sides”=在幻灯片的左侧和右侧显示上一个/下一个链接；“none”=不显示上一个/下一个链接/按钮；“both”=使用幻灯片的按钮和侧面显示上一页/下一页；默认=侧面
• 数据主题：默认/深色/柔和
• 数据幻灯片保持秒数：播放时，每个幻灯片在移动到下一个幻灯片之前显示的时间长度。默认值=6

<ul class="riot-slider"
    data-do-console-log="true"
    data-use-material-icons="true"
    data-is-auto-play="true"
    data-do-show-buttons="true"
    data-do-swipe-on-touchscreen="true"
    data-button-number-display="default"
    data-previous-next-display="both"
    data-theme="default"
    data-slide-hold-seconds="2">
  <li data-caption="Image Capation">
    <img src="1.jpg" alt="Alt Text" />
  </li>
  <li>Text Here</li>
  <li>Any HTML Content Here</li>
</ul>

更新日志：

2022-08-02

• 添加了自定义的上一个和下一个链接

2022-08-01

• 在修改之前检查元素是否已设置

2022-03-08

• 重构
• 增加了触摸滑动支持
• 添加了HTML数据属性

预览截图

响应式旋转木马插件 jQuery Riot Slider