Image slider sometimes not working well

Question

I am new in php and I have a problem with my website.

I have a code for image slider in java script and I have set the slider to slide after every second but sometimes it moves automatically fast and then mouse over event also not work. It happens very rarely.

Here is my java script code

'use strict';

$(function(){
var width =300;

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},1000,function(){
            currentSlide++;
            if(currentSlide===$slides.length){
                currentSlide=1;
                $slideContainer.css('margin-left',0);
            }
        });
    },pause);
}
function stopSlider(){
    clearInterval(interval);

}
$slider.on('mouseenter',stopSlider).on('mouseleave',startSlider);
startSlider();

});

HTML code

 <html>
<head>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/student/main.css">
<script src="http://localhost:8080/student/jquery-3.2.1.min.js"></script>
<script src="http://localhost:8080/student/main.js"></script>
</head>
<body>
<center>
<div class="container">
<div class="header">
<h1 class="text-muted">Some of the Beautiful Places</h1>
</div>
<div id="slider">
<ul class="slides">
<li class="slide"><img  src="http://localhost:8080/student/slides/a.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/2.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/3.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/4.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/5.jpg" class="zoom"/></li>
<li class="slide"><img  src="http://localhost:8080/student/slides/6.jpg" class="zoom"/></li>
<li class="slide"><img  src="#"/></li>
</div>
</div>
</div>
</center>
</body>
</html>

and css file

 #slider{ width:300px; height:168px; overflow:hidden; } #slider .slides{ display: inline-block; width : 6720px; height:168px; margin:0; padding:0; } #slider .slide{ float:left; list-style-type:none; width:300px; height:168px; }

Answer 1

works fine, how to reproduce bug ?

 'use strict'; $(function(){ var width =300; var pause =1000; 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}, 1000, function(){ currentSlide++; if(currentSlide===$slides.length){ currentSlide=1; $slideContainer.css('margin-left',0); } }); },pause); } function stopSlider(){ clearInterval(interval); } $slides.hover(stopSlider, startSlider); startSlider(); });

 #slider{ width:300px; height:168px; overflow:hidden; } #slider .slides{ display: inline-block; width : 6720px; height:168px; margin:0; padding:0; } #slider .slide{ float:left; list-style-type:none; width:300px; height:168px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <center> <div class="container"> <div class="header"> <h1 class="text-muted">Some of the Beautiful Places</h1> </div> <div id="slider"> <ul class="slides"> <li class="slide"><img src="http://lorempixel.com/300/168" class="zoom"/></li> <li class="slide"><img src="http://lorempixel.com/300/168" class="zoom"/></li> <li class="slide"><img src="http://lorempixel.com/300/168" class="zoom"/></li> <li class="slide"><img src="http://lorempixel.com/300/168" class="zoom"/></li> <li class="slide"><img src="http://lorempixel.com/300/168" class="zoom"/></li> <li class="slide"><img src="http://lorempixel.com/300/168" class="zoom"/></li> <li class="slide"><img src="#"/></li> </div> </div> </div> </center> </body> </html>

Image slider sometimes not working well

Question

1 answers

solution1
0 2017-08-28 19:11:16

Image slider sometimes not working well

Question

1 answers

solution1 0 2017-08-28 19:11:16

solution1
0 2017-08-28 19:11:16