#simple slider

[r-kad]

Best WordPress Slider Plugin 2018

Best WordPress Slider Plugin 2018

There are too many WordPress slider plugins available on WordPress.org. But the problem is many non technical users unable to find out which one is easy, best and suitable plugin to his blog. That’s why we built a very easy, simple, fast and effective free slider plugin for non technical blog users. Plugin is Responsive Slider Gallery with less setting and fast publishing. The plugin is very…

View On WordPress

[htmluse]

New Post has been published on Html Use

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’

//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' );