I am currently working to modify some existing code to fit my website concept. One aspect I am struggling with is how to make the 'pause' function activate only when a user hovers over one of the li items, preventing the carousel from looping endlessly.
Do you have any suggestions on how this can be accomplished? I have tried different approaches like:
if ($('#element:hover').length != 0) {
pause();
}
However, these attempts do not align with the current code structure. Could someone provide me with guidance on this issue? Thank you.
https://jsfiddle.net/lovromar/Z4VpZ/
HTML
<div id="carousel-container">
<div id="carousel-inner">
<ul id="carousel-ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
CSS
#carousel-container {
width:680px;
margin:2em auto;
position:relative;
border:1px solid #ccc;
overflow:hidden;
height:250px;
}
#carousel-inner{
width:680px;
float:left;
position:relative;
overflow:hidden;
}
#carousel-ul {
position:relative;
left:-160px;
list-style-type:none;
margin:0px;
padding:0px;
width:9999px;
padding-bottom:50px;
}
#carousel-ul li{
float:left;
width:150px;
padding:0px;
height:186px;
margin:50px 15px 0 15px;
position:relative;
background:#c0c0c0;
line-height:186px;
font-size:2em;
text-align:center;
}
JS
var Carousel = new
function() {
var wrapper = document.getElementById('carousel-container'),
timer = null;
var start = function() {
doCarousel();
};
var sliding = function() {
var item_width = $('#carousel-ul li').outerWidth()+10;
var left_indent = parseInt($('#carousel-ul').css('left'))-item_width;
$('#carousel-ul:not(:animated)').animate({
'left':left_indent
},2000,'linear',function() {
$('#carousel-ul li:last').after($('#carousel-ul li:first'));
$('#carousel-ul').css({
'left':'-160px'
});
});
};
var doCarousel = function() {
timer = setInterval(sliding,2000);
};
var pause = function() {
clearInterval(timer);
timer = null;
};
var resume = function() {
doCarousel();
};
this.init = function(){
start();
};
}();
$(function(){
Carousel.init();
});