"sliding images "
Bootstrap 3.0.0 Snippet by Ashish336

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title>My webpage</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="sytle.css"> </head> <body> <div class="container"> <div class="header"> <h1 class="text-muted">jQuery Basic Slider</h1> <P>This get paused when hover on sliding photo....and get started when we remove mouse</P> </div> <div id="slider"> <ul class="slides"> <li class="slide slide1">slide1</li> <li class="slide slide2">slide2</li> <li class="slide slide3">slide3</li> <li class="slide slide4">slide4</li> <li class="slide slide5">slide5</li> <li class="slide slide1">slide1</li> </ul> </div> </div> </body> </html>
#slider { width: 720px; height: 400px; overflow: hidden; } #slider .slides { display: block; width: 6000px; height: 400px; margin: 0; padding: 0; } #slider .slide { float: left; list-style-type: none; width: 720px; height: 400px; } .slide1 {background: gold;} .slide2 {background: blue;} .slide3 {background: green;} .slide4 {background: purple;} .slide5 {background: pink;}
$(function(){ var width=720; var animationspeed=1000; var pause=3000; var currentslide=1; var $slider= $('#slider'); var $slidecontainer= $slider.find('.slides'); var $slides=$slidecontainer.find('.slide'); var interval; function startSlider(){ interval= setInterval(function(){ $slidecontainer.animate({'margin-left':'-='+width},animationspeed,function(){ currentslide++; if(currentslide==$slides.length){ currentslide=1; $slidecontainer.css('margin-left',0); } }); },pause); } function pauseSlider(){ clearInterval(interval); } $slider.on('mouseenter',pauseSlider).on('mouseleave',startSlider); startSlider(); });

Related: See More


Questions / Comments: