Dynamic Responsive Carousel Slider Plugin With jQuery - rSlider.js
File Size: | 24.9 KB |
---|---|
Views Total: | 6677 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

rSlider.js is a simple, responsive jQuery carousel slider plugin which dynamically adjusts the container height based on the content.
How to use it:
1. Load the jQuery rSlider.js plugin's CSS file in the header of the html page.
<link rel="stylesheet" href="rSlider.min.css">
2. Add images and other html content into the slider as follows:
<div class="rSlider"> <!-- begin rSlider--view --> <div class="rSlider--view"> <!-- slide --> <div class="rSlider--slide"> <div class="rSlider--container"> <div class="slide-styled"> <h1>Slide 1</h1> </div> </div> <div class="rSlider--image"><img src="1.jpg"></div> <div class="rSlider--bg-color"></div> </div> <!-- slide --> <div class="rSlider--slide"> <div class="rSlider--container"> <div class="slide-styled"> <h1>Slide 2</h1> </div> </div> <div class="rSlider--image"><img src="2.jpg"></div> <div class="rSlider--bg-color"></div> </div> <!-- slide --> <div class="rSlider--slide"> <div class="rSlider--container"> <div class="slide-styled"> <h1>Slide 3</h1> </div> </div> <div class="rSlider--image"><img src="3.jpg" /></div> <div class="rSlider--bg-color"></div> </div> <!-- End of .rSlider--view --> </div> <!-- Controls --> <div class="rSlider--dots-controls"></div> <div class="rSlider--arrow-controls"></div> </div>
3. Load the latest version of jQuery library and the jQuery rSlider.js script at the end of the html document.
<script src="jquery.min.js"></script> <script src="rSlider.min.js"></script>
4. Customize the slider with the following options.
{ currentSlide: 0, defaultSlide: 0, delay: 7000, height: undefined, width: undefined, minHeight: 500, automatic: false, dirButtons: true, dirButtonNext: "next", dirButtonPrev: "prev", transitions: true }
This awesome jQuery plugin is developed by MichaelMammoliti. For more Advanced Usages, please check the demo page or visit the official website.