JS слайдер при наведении указателя мыши/мышином

Question

Привет, у меня проблемы с слайдером JS-клиентов на веб-сайте.

Я хочу, чтобы остановить его, пока mouseover и возобновить пока mouseleft. Я искал и проверял код, но я не знаю, почему он все еще не работает, может кто-нибудь мне помочь?

$(function(){ 

    var $clientcarousel = $('#clients-list'); 
    var clients = $clientcarousel.children().length; 
    var clientwidth = (clients * 400); // 140px width for each client item 
    $clientcarousel.css('width',clientwidth); 

    var rotating = true; 
    var clientspeed = 0; 
    var seeclients = setInterval(rotateClients, clientspeed); 


    function rotateClients() { 
    if(rotating != false) { 
     var $first = $('#clients-list li:first'); 
     $first.animate({ 'margin-left': '-220px' }, 5000, "linear", function() { 
     $first.remove().css({ 'margin-left': '0px' }); 
     $('#clients-list li:last').after($first); 
     }); 
    } 
    } 
}); 


$(document).on({ 
    mouseover: function(){ 
     rotating = false; // turn off rotation when hovering 
    }, 
    mouseleave: function(){ 
     rotating = true; 
    } 
    }, '#clients'); 

Answer 1

Пожалуйста, обратите внимание на такой подход:

$(function() { 
 

 
    var $clientcarousel = $('#clients-list'); 
 
    var clients = $clientcarousel.children().length; 
 
    var clientwidth = (clients * 400); // 140px width for each client item 
 
    $clientcarousel.css('width', clientwidth); 
 

 
    var rotating = true; 
 
    var clientspeed = 0; 
 
    var seeclients = setInterval(rotateClients, clientspeed); 
 

 

 
    function rotateClients() { 
 
    if (rotating != false) { 
 
     var $first = $('#clients-list li:first'); 
 
     $first.animate({ 
 
     'margin-left': '-220px' 
 
     }, 5000, "linear", function() { 
 
     $first.remove().css({ 
 
      'margin-left': '0px' 
 
     }); 
 
     $('#clients-list li:last').after($first); 
 
     }); 
 
    } else { 
 
    $('#clients-list li').stop(); 
 
    } 
 
    } 
 

 
    $(document).on({ 
 
    mouseenter: function(){ 
 
     rotating = false; // turn off rotation when hovering 
 
    }, 
 
    mouseleave: function(){ 
 
     rotating = true; 
 
    } 
 
    }, '.clients'); 
 

 
});

/*Logo carousel*/ 
 

 
.clients { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-height: 20%; 
 
} 
 
.clients .clients-wrap { 
 
    display: block; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
.clients .clients-wrap ul { 
 
    display: block; 
 
    list-style: none; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.clients .clients-wrap ul li { 
 
    display: block; 
 
    float: left; 
 
    position: relative; 
 
    width: 220px; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    text-align: center; 
 
} 
 
.clients .clients-wrap ul li img { 
 
    vertical-align: middle; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    -webkit-transition: 0 linear left; 
 
    -moz-transition: 0 linear left; 
 
    transition: 0 linear left; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
 
    filter: alpha(opacity=40); 
 
    filter: grayscale(100%); 
 
    opacity: 0.40; 
 
} 
 
.clients .clients-wrap ul li img:hover { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: alpha(opacity=100); 
 
    filter: grayscale(0%); 
 
    opacity: 1.0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="clients"> 
 
    <p></p> 
 
    <div class="clients-wrap"> 
 
    <ul id="clients-list" class="clearfix"> 
 
     <li> 
 
     <img src="http://iconshow.me/media/images/logo/brand-logo-icon/png/256/cocacola-256.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/2.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/3.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/4.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/5.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/6.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/7.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/8.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/9.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/10.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/11.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/12.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/13.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/14.png"> 
 
     </li> 
 
     <li> 
 
     <img src="img/logos/15.png"> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- @end .clients-wrap --> 
 
</div>

Answer 2

Простой JQuery карусельного

$(window).on("load", makeCarousel); 
 

 
function makeCarousel() { 
 

 
    var carousel = $('.carousel ul'), 
 
     interval = $(carousel).parent().data("interval") * 1000, 
 
     speed = $(carousel).parent().data("speed") * 1000, 
 
     count = $(carousel).children().length, 
 
     width = $(carousel).find("img:first").width(), 
 
     id, moveIt; 
 
    
 
    $(carousel) 
 
    .css({ 
 
     width: count * width, 
 
     position: "relative", 
 
     margin: 0, 
 
     padding: 0, 
 
     listStyle: "none" 
 
    }) 
 
    .parent().css({ width: width, overflow: "hidden" }) 
 
    .animate({opacity: 1}, 250) 
 
    .on("mouseover", function() { clearInterval(id) }) 
 
    .on("mouseout", function() { moveIt() }) 
 
    .find("li").css({ float: "left" }) 
 
    .find("img").css({ verticalAlign: "bottom" }); 
 
    
 
    (moveIt = function() { 
 
    id = setInterval(function() { 
 
     $(carousel).animate({left: -width}, speed, function() { 
 
     $(this).css({left: 0}); 
 
     $(this).children(":last").after($(this).children(":first")); 
 
     }); 
 
    }, interval + speed); 
 
    })(); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="carousel" data-interval="1" data-speed="0.6" style="opacity:0"> 
 
    <ul> 
 
    <li><a href="#"><img src='http://placehold.it/350x200/111111?text=First Slide'></a></li> 
 
    <li><a href="#"><img src='http://placehold.it/350x200/444444?text=Second Slide'></a></li> 
 
    <li><a href="#"><img src='http://placehold.it/350x200/777777?text=Third Slide'></a></li> 
 
    <li><a href="#"><img src='http://placehold.it/350x200/aaaaaa?text=Fourth Slide'></a></li> 
 
    </ul> 
 
</div>