Responsive Carousel Plugin With jQuery - Riot Slider

File Size: 257 KB
Views Total: 4103
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Carousel Plugin With jQuery - Riot Slider

Riot Slider is a brand new jQuery slider/carousel plugin for presenting your content in any type of way you'd like.

It's a fully responsive and mobile friendly slider that supports any kind of content, from images to text, from iframes to HTML5 audio and video.

It's easy for you to get your hands on and comes with many features, allowing a variety of customizations.

How to use it:

1. To ge started, load the riot-slider.css and riot-slider.js files in the document.

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

2. Add slides as list items to the slider. The plugin will automatically initialize the slider on all HTML lists with the CSS class of riot-slider.

<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. Config the Riot Slider with the following HTML data attributes:

  • data-do-console-log: If set, information will be added to the console log. default = false
  • data-use-material-icons: Uses material icons for play, stop, previous, and next buttons. default = false
  • data-is-auto-play: Enable auto play. default = true
  • data-do-show-buttons: Display slider control buttons (numbers, play, pause, previous, next). default = true
  • data-do-swipe-on-touchscreen: Enable touch swipe. default = true
  • data-button-number-display: "never" = do not display number buttons; "normal" = hide number buttons if they need to wrap; "always" = always display number buttons; default = normal
  • data-previous-next-display: "buttons" = display prev/next buttons near the slide numbers and play/pause buttons; "sides" = display prev/next links on the left and right of the slide; "none" = display no prev/next links/buttons; "both" = display prev/next in with the buttons And sides of the slides; default = sides
  • data-theme: default/dark/pastel
  • data-slide-hold-seconds: The length of time each slide is displayed before moving to the next when playing. default = 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>

Changelog:

2022-08-02

  • added custom previous and next links

2022-08-01

  • check that elements are set before modifying

2022-03-08

  • refactor
  • added touch swipe support
  • added HTML data attributes

This awesome jQuery plugin is developed by akrayvo. For more Advanced Usages, please check the demo page or visit the official website.