Responsive Fullscreen Slideshow Plugin with jQuery - RBSlideshow

File Size: 4.84 KB
Views Total: 3573
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Fullscreen Slideshow Plugin with jQuery - RBSlideshow

RBSlideshow is a really simple jQuery plugin that helps you generate a fully responsive, fullscreen slideshow from a list of images.

Features:

  • Totally responsive that will render your page faster.
  • Custom image captions.
  • Dots pagination.
  • Keyboard navigation.
  • Auto resize & crop images to make them always stay in center.
  • Auto rotation on page load.

How to use it:

1. Add the latest version of jQuery library together with the RBSlideshow.css and RBSlideshow.js to your webpages.

<link rel="stylesheet" href="assets/css/RBSlideshow.css">
<script src="jquery.min.js"></script>
<script src="assets/js/RBSlideshow.js"></script>

2. Add a list of images to the slideshow. You can also set individual image captions using data-caption attributes on the list.

<div id="RBSlideshow">
  <ul>
    <li><img src="1.jpg" data-caption="Caption 1"></li>
    <li><img src="2.jpg" data-caption="Caption 2"></li>
    <li><img src="3.jpg" data-caption="Caption 3"></li>
  </ul>
</div>

3. Create a dots navigation for the slideshow.

<div id="slideshow">
  <div id="slides">
    <div id="prevSlide">
      <p></p>
    </div>
    <div id="currentSlide">
      <p></p>
    </div>
    <div id="nextSlide">
      <p></p>
    </div>
  </div>
</div>

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