CODEWITHSUNDEEP
slider
user3299992
user3299992

Reputation: 25

Custom JQuery Slider issues

I'm still trying to master Javascript and I came across my latest puzzle today. I am trying to make a standard slider that pauses on hover and resumes on mouseout. I've tried several attempts and my JS bombs each time. Below is the Jquery. Here is the JSFIDDLE http://jsfiddle.net/HFQ28/

jQuery(document).ready(function ($) {

timer = setInterval(function () {
    moveRight();
}, 1000);

$('#slider').mouseover(function() {
    clearInterval(timer);
});

$('#slider').mouseleave(function() {
    timer;
});

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    }

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    }

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

Upvotes: 0

Views: 440

Answers (2)

Manish Patolia
Manish Patolia

Reputation: 517

you can also try with below 

$( "#slider" )
.on( "mouseenter", function() {
   clearInterval(timer);
})
.on( "mouseleave", function() {
   timer = setInterval(function () {
      moveRight();
  }, 1000);
});

jsfiddle click here

Upvotes: 0

esense
esense

Reputation: 11

Try to update .mouseleave

$('#slider').mouseleave(function () {
        timer = setInterval(function () {
        moveRight();
    }, 1000);
    });

Upvotes: 1

Related Questions