Card-style Responsive Carousel Plugin - jQuery RGBSlide

File Size: 24 KB
Views Total: 4304
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Card-style Responsive Carousel Plugin - jQuery RGBSlide

The jQuery RGBSlide plugin helps you create a responsive carousel slider where the slide will be revealed by sliding out the preview one just like stacked cards.

Features:

  • RGBSlide is so easy to implement and manipulate to fit your website.
  • Load times won't be affected so the experience will stay smooth.
  • It's flat, clean, modern and neutral, making RGBSlide an extremely versatile plugin to suit almost all websites.

How to use it:

1. Add jQuery library and the jQuery RGBSlide plugin's script right before the closing body tag.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="rgbSlide.min.js"></script>

2. Create a div element and give it any ID you like and then populate it with however many slides you want.

<div id="exampleSlider"> 
  <div><h1>Slide 1</h1></div>
  <div><h1>Slide 2</h1></div>
  <div><h1>Slide 3</h1></div>
</div>

3. Apply your own CSS styles to the carousel.

  • All slides will be sequentially given id's: sl1,sl2,sl3...
  • You can also style every slide in one go using the .sliderBox class.
  • Feel free to override the example styles as shown below.
#exampleSlider{
  width:92vw;
  left:4vw;
  margin-bottom:10px;
  margin-top:10px;
  padding:0;
}

.sliderBox{
  text-align:center;
  background-size:contain;
  color:rgba(255,255,255,0.9);
  font-family:'Exo';
  font-weight:900;
  padding:0;
}

.sliderBox h1{
  font-size:70px;
}

#sl1{
  background:url(1.jpg) center center no-repeat;
}

#sl2{
  background:url(2e.jpg) center center no-repeat;
}

#sl3{
  background:url(3.jpg) center center no-repeat;
}

4. Simply call the rgbslide() method on the DIV element and one.

$("#exampleSlider").rgbslide();

5. Customize the carousel with optional parameters. By default, the rate at which slides change is 3400ms. However, you can change it yourself. All you need to do is put the desired interval as an int parameter.

$("#exampleSlider").rgbslide(2000);

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