在以下情况下,我想禁用下一个/上一个按钮:
当第一张幻灯片出现在边框内时,禁用上一个按钮;
在动画到达最后一张幻灯片时禁用下一个按钮;
换句话说:
在内部的第一张幻灯片预设中,我要防止滑块向右移动,然后...
在本节中出现的最后一张幻灯片上,我要防止滑块向左移动
<pre>
<code>
<div class="AMcarousel" id="carousel-container">
<div class="left-container prev ">
<div class="left-btn">
<i class="fas custom-chev fa-chevron-left"></i>
</div>
</div>
<div class="right-container prev ">
<div class="right-btn">
<i class="fas custom-chev fa-chevron-right"></i>
</div>
</div>
<div id="slide2" class="slide">
<div class="hour-table">
<ul class="hour-list" >
<li><a href="#" class="active-btn">Tue 24 Step</a></li>
<li><a href="#">Mon 27 Step</a></li>
<li><a href="#">Wend 28 Step</a></li>
</ul>
</div>
</div>
<div id="slide3" class="slide">
<div class="hour-table">
<ul class="hour-list" >
<li><a href="#" class="active-btn">Tue 24 Step</a></li>
<li><a href="#">Mon 27 Step</a></li>
<li><a href="#">Wend 28 Step</a></li>
</ul>
</div>
</div>
</div>
</code>
</pre>
/ ***********自定义轮播********* /
$(window).on('load',function(){
var Stack = new Array();
var count = 0;
$('img').attr('draggable', false);
$('.TAMcarousel').each(function(){
carousel(count, this);
count++;
});
function carousel(count, TAMcarousel){
Stack[count] = new Array();
$( TAMcarousel ).height($(TAMcarousel).find('#slide3').height());
$(window).resize(function() {
$( TAMcarousel ).height($(TAMcarousel).find('#slide3').height());
});
$(TAMcarousel).find('.slide').each(function(){
Stack[count].push($(this));
})
var animating=false;
var child = $(TAMcarousel).find(".right-btn");
$(TAMcarousel).find(".right-btn").on('click', moveright);
function moveright(){
if(animating)return;
animating=true;
// Move the slides
Stack[count][1].animate({left: '-100%'},
{step: function( now, fx )
{
Stack[count][2].css( "left",
((now+100)+'%'));
},done: function()
{
// move slide references in arrays
Stack[count].push(Stack[count][0]); // move
first slide to the end
Stack[count].shift();//remove first element
in array
// move actual slides
Stack[count][0].css({left: '-100%'},0);
Stack[count][2].css({left: '100%'},0);
animating=false;
}
});
};
$(TAMcarousel).find(".left-btn").on('click', moveleft);
function moveleft(){
console.log(Stack[count]);
if(animating)return;
animating=true;
Stack[count][1].animate({left: '100%'},
{step: function( now, fx )
{
Stack[count][0].css( "left", ((now-
100)+'%'));
}
,done: function()
{
// move slide references in arrays
Stack[count].unshift(Stack[count]
[((Stack[count].length)-1)]); // copy last slide to the start
Stack[count].pop();//remove first slide in
array
// move actual slides
Stack[count][0].animate({left: '-100%'},0);
Stack[count][2].animate({left: '100%'},0);
animating=false;
}
});
};
// cheack for display none the left chevron button
// End cheack for display none the left chevron button
} /* END of carousel function */
}); /* END of window onload */