Dynamic Responsive Carousel Slider Plugin With jQuery - rSlider.js

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.