#simply carousel

New Post has been published on http://www.htmluse.com/simply-carousel/

Simply Carousel

Download   Demo

This jQuery plugin Simply Carousel  for simple image slider with arrow and hovers options.

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

IMPORTANT NOTE

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