I have a problem since 3-4 hours ago, I already been here, here, here, etc... But I can't make this work in my case:
var timer_slideshow = {};
var that, that_boss, has_auto, ele_to_prep;
function timer_func_slideshow(ele) {
ele.find('.btn-next-slideshow').trigger( "click" );
}
$('.slideshow-wrapper').each(function(idx, val) {
that_boss = $(this);
that = $('.slideshow-container', this); // the same has that_boss.find('.slideshow-container')
has_auto = that.data('auto') != 0;
if(has_auto)
timer_slideshow[idx] = setInterval(function() { timer_func_slideshow(that_boss); }, 4000);
that_boss.find('.btn-next-slideshow').on("click", function() {
if(has_auto)
clearInterval(timer_slideshow[idx]);
that.find('.item').eq(0).stop().animate({
'margin-left': '-100%',
}, 500, function() {
$(this).parent().append($(this));
$(this).css({'margin-left': '0'});
timer_slideshow[idx] = (has_auto) ? setInterval(function() { timer_func_slideshow(that_boss); }, 4000) : undefined;
});
});
that_boss.find('.btn-prev-slideshow').on("click", function() {
if(has_auto)
clearInterval(timer_slideshow[idx]);
ele_to_prep = that.find('.item').last().css({'margin-left': '-100%'});
that.prepend(ele_to_prep);
that.find('.item').eq(0).stop().animate({ // este era o ultimo, o que fizemos prepend na linha acima
'margin-left': '0'
}, 500, function() {
timer_slideshow[idx] = (has_auto) ? setInterval( function() { timer_func_slideshow(that_boss); }, 4000) : undefined;
});
});
});.slideshow-container {
margin: 0 auto;
width: 100%;
height: 400px;
overflow:hidden;
white-space:nowrap; /* VERY IMPORTANT, tirar para perceber */
list-style:none;
font-size: 0; /* SEM MARGEM ENTRE OS ELEMENTOS FILHOS */
}
.slideshow-container>.item {
display: inline-block;
width: 100%;
height: 100%;
}
.slideshow-container>.item>.imagem {
display: block;
width: 100%;
height: 90%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.slideshow-container>.item>small {
/*position: absolute;*/
/*bottom: 20px;*/
z-index: 99999999999999;
width: 100%;
display: block;
color: #252525;
font-size: 12px;
text-align: center;
}
.slideshow-wrapper {
position: relative;
width: 100%;
}
.slideshow-controls {
position: absolute;
height: 20px;
bottom: 0;
top: 0;
margin: auto auto;
color: #D11C58;
cursor: pointer; cursor: hand;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-wrapper">
<div class="slideshow-container">
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=585');"></div>
<small></small>
</div>
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=586');"></div>
<small></small>
</div>
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://i.stack.imgur.com/5SakC.jpg?s=128&g=1');"></div>
<small></small>
</div>
</div>
<div class="slideshow-controls btn-next-slideshow">►</div>
<div class="slideshow-controls btn-prev-slideshow">◄</div>
</div>
<div class="slideshow-wrapper">
<div class="slideshow-container">
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=585');"></div>
<small></small>
</div>
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://picsum.photos/500/500/?image=586');"></div>
<small></small>
</div>
<div class="item" style="min-height: 400px;">
<div class="imagem" style="background-image: url('https://i.stack.imgur.com/5SakC.jpg?s=128&g=1');"></div>
<small></small>
</div>
</div>
<div class="slideshow-controls btn-next-slideshow">►</div>
<div class="slideshow-controls btn-prev-slideshow">◄</div>
</div>As you can see, just the last slide is moving/working, because setInterval is defined with the last value when the loop ends.
I know that's because the each cicle, and that_boss value isn't permanent, stays with the last loop value.
But can't seen to find a solution for this.
