young_padawan young_padawan - 3 months ago 28
jQuery Question

JS slider while mouseover/mouseleft

Hello I have problems with JS clients slider on website.

I want to stop it while

mouseover
and resume while
mouseleft
. I have searched and checked the code but I don't know why it still doesn't work, could somebody help me?

$(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

Please have a look at this approach:

$(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>