Responsive Background Image Carousel Plugin With jQuery And CSS3

Yet another jQuery carousel plugin which converts a set of background images with text information into a responsive, automatic carousel slider with high performance animations based on CSS3 transforms and transitions.

More features:

• Dot pagination and arrow navigation controls.
• Multiple carousels on one page.

How to use it:

1. Download the plugin and put the required slider.css file into the head section of the html page.

<link rel="stylesheet" href="/path/to/slider.css">

2. Add slide items (background images and text) into the carousel like this:

<div class="slider" id="slider">
  <div class="slItems">
    <div class="slItem" style="background-image: url('1.jpg');">
      <div class="slText">
        Slide 1
      </div>
    </div>
    <div class="slItem" style="background-image: url('2.jpg');">
      <div class="slText">
        Slide 2
      </div>
    </div>
    <div class="slItem" style="background-image: url('3.jpg');">
      <div class="slText">
        Slide 3
      </div>
    </div>
  </div>
</div>

3. Put the needed jQuery library and jQuery rbtSlider plugin's script at the bottom of the page.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="/path/to/slider.min.js"></script>

4. Enable the carousel slider on page load.

$(function(){
  $('#slider').rbtSlider();
});

5. Config the carousel slider with the following options.

$(function(){
  $('#slider').rbtSlider({

    // height
    'height': '100vh', 

    // displays pagination dots
    'dots': true,

    // displays navigation arrows
    'arrows': true, 

    // autoplay intervel
    'auto': 3 // 3 seconds
    
  });
});

---

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