While I successfully built a carousel for my clients that works perfectly on non-bootstrap platforms, I encountered some issues when trying to make it responsive on Bootstrap. It seems that there is a JavaScript issue that is preventing it from working properly.
Here is the code snippet:
var $clientcarousel = $('#clients-list');
var clients = $clientcarousel.children().length;
var clientwidth = (clients * 140);
$clientcarousel.css('width', clientwidth);
var rotating = true;
var clientspeed = 1800;
var seeclients = setInterval(rotateClients, clientspeed);
// Mouse hover events
$(document).on({
mouseenter: function() {
rotating = false; // turn off rotation when hovering
},
mouseleave: function() {
rotating = true;
}
}, '#clients');
function rotateClients() {
if (rotating != false) {
var $first = $('#clients-list li:first');
$first.animate({
'margin-left': '-140px'
}, 600, function() {
$first.remove().css({
'margin-left': '0px'
});
$('#clients-list li:last').after($first);
});
}
}
})#clients {
display: block;
}
#clients .clients-wrap {
display: block;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
/* CSS styling for client list items */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div id="clients">
<div class="clients-wrap">
<ul id="clients-list" class="clearfix navbar">
<li class="nav-item"><img class="nav-link img-fluid" src="_images/client01-cartoon-network.png" alt="Cartoon Network"></li>
<li class="nav-item"><img class="nav-link img-fluid" src="_images/client02-rough-draft-studios.png" alt="Rough Draft Studios"></li>
<li class="nav-item"><img class="nav-link img-fluid" src="_images/client03-spongebob-movie2.png" alt="SpongeBob Movie #2"></li>
<li class="nav-item"><img class="nav-link img-fluid" src="_images/client04-apple-inc.png" alt="Apple Computers"></li>
<li class="nav-item"><img class="nav-link img-fluid" src="_images/client05-google-talk.png" alt="Google chat talk"></li>
<li class="nav-item"><img class="nav-link img-fluid" src="_images/client06-g4tv.png" alt="G4TV channel"></li>
<li class="nav-item"><img class="nav-link img-fluid" src="_images/client07-wonka-candy.png" alt="Wonka Chocolates and Candy"></li>
</ul>
</div>
</div>
</div>
</div>