Web Design
Basic Image slider tutorial
sunil 07 Apr 2016 06:44 AM
Basic Image slider tutorial There are a lot of image sliders out now a days. In this blog, I have made this basic image slider for the beginners to get idea that how image slider works. Click on below link to view demo https://jsfiddle.net/sunil_kmr19/oons7ogu/ Step 1 : Prepare HTML code with images First of all we will create our HTML code with images to slide show and put left and right navigation.
>
Step 2 : CSS code Now we are going to write css code to make adjustment divs and navigation button. We will hide all divs except one and put active class there. #slider { width: 960px; height: 317px; overflow: hidden; } #slider .slides { display: block; margin:0; padding: 0; } #slider .slide { /*float: left;*/ list-style-type: none; display: none; } #slider .active{ display:block; } .left{ position: absolute; left: 17px; top: 18%; } .right{ position: absolute; right: 413px; top: 18%; } .left a, .right a{ text-decoration: none; color: rgb(73, 73, 73); font-size: 48px; background: rgb(204, 204, 204) none repeat scroll 0% 0%; border: 1px solid rgb(119, 119, 119); } .left a:hover, .right a:hover{ background: #000; } Step3 : Jquery code In this jquery part, we will create an animation using left and right navigation. Also we will use setInterval() function to make automatic slideshow. $(function(){ var pause = 2000; // set interval time var $slider = $('#slider'); var interval; startSlider(); //run startslider function on specific interval function startSlider(){ interval = setInterval(funSlide, pause, true); //run funslider function on set interval } function stopSlider(){ clearInterval(interval); //clear startslider effect } function funSlide(value){ if(value) //check condition true or false { var $current=$("#slider .slide:visible").fadeOut(); var $next = $current.next().length ? $current.next() : $("#slider .slide:first"); $next.fadeIn(100); } else { var $current=$("#slider .slide:visible").fadeOut(); var $prev = $current.prev().length ? $current.prev() : $("#slider .slide:last"); $prev.fadeIn(100); } } $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider); $('body').on('click', '.right a', function(){ funSlide(true); //set true on right navigation click }) $('body').on('click', '.left a', function(){ funSlide(false); //set false on false navigation click }) }); 
