Simply Carousel is a jQuery plugin for simple image slider with arrow and hovers options

sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: haniepark.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/carousel.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/simplycarousel.js"></script>

2. HTML

<div id="main_banner">

	<div class="carousel-slide" style="background: url(img/image1.jpg) no-repeat 50% 50%; background-size: cover;">
		<div class="caption">1st Slide Caption</div>
	</div>			

	<div class="carousel-slide" style="background: url(img/image2.jpg) no-repeat 50% 50%; background-size: cover;">
		<div class="caption">2nd Slide Caption</div>
	</div>	

	<div class="carousel-slide" style="background: url(img/image3.jpg) no-repeat 50% 50%; background-size: cover;">
		<div class="caption">3rd Slide Caption</div>
	</div>

	<div class="carousel-slide" style="background: url(img/image4.jpg) no-repeat 50% 50%; background-size: cover;">
		<div class="caption">4th Slide Caption</div>
	</div>

	<!-- FOR CAROUSEL WITH ARROW AND HOVER OPTIONS --> 
	<span class="arrow left select-none"><</span>
	<span class="arrow right select-none">></span>

</div> <!--#main_banner-->

3. JAVASCRIPT

//SIMPLE IMAGE SLIDER
$('.carousel-slide').slider();

//CAROUSEL WITH ARROW AND HOVER OPTIONS
$('.carousel-slide').sliderArrow();

4. OPTIONS

You can customize 3 properties shown below for both slider functions.

• transition_time: transition time between slides
• next_slides: staging time for each slide
• slideOn: current slide indicator

slideOn property has to be '.your-slider-name.on', if your slider name is something other than '.carousel-slide'

//SIMPLE IMAGE SLIDER
$('.carousel-slide').slider({
	//DEFAULTS
	transition_time : 1000,
	next_slides : 2500,
	slideOn :'.carousel-slide.on'
});

//CAROUSEL WITH ARROW AND HOVER OPTIONS
$('.carousel-slide').sliderArrow({
	//DEFAULTS
	transition_time : 1000,
	next_slides : 2500,
	slideOn :'.carousel-slide.on'
});