🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Yet another jQuery based fullscreen responsive carousel plugin which rotates through a group of background images with custom text using CSS3 transforms and transitions.

Carousel background-slideshow

Documentation

Carousel ver 1.0.2

Plugin for creating carousel with autoplay Demo

For using just add:
<script src="js/slider.min.js"></script> to the body
<link rel="stylesheet" href="css/slider.css"> to the head

Markup example:

	<div class="slider" id="slider"> 		<div class="slItems"> 			<div class="slItem" style="background-image: url('img/1.jpg');"> 				<div class="slText"> 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. 				</div> 			</div> 			<div class="slItem" style="background-image: url('img/2.jpg');"> 				<div class="slText"> 					Praesent consequat sapien ut dui hendrerit imperdiet.   				</div> 			</div> 			<div class="slItem" style="background-image: url('img/3.jpg');"> 				<div class="slText"> 					Morbi aliquam tristique rutrum.  				</div> 			</div> 		</div> 	</div>

Init example:

	$('#slider').rbtSlider({ 		'height': '100vh', //carousel height 		'dots': true, //dot controls 		'arrows': true, //arrow controls 		'auto': 3 //autoplay time in seconds 	});

All of this arguments are not required

For using multiple sliders on single page just initialize carousel by class or separate selectors with commas:

	$('.slider').rbtSlider({ 		'height': '100vh', //carousel height 		'dots': true, //dot controls 		'arrows': true, //arrow controls 		'auto': 3 //autoplay time in seconds 	});

Changelog

1.0.2 Adding multiple carousels support
1.0.1 Fix animation


You May Also Like