如何在滑块中不显示上一个按钮和下一个按钮?
我想如果滑块的第一张幻灯片是显示用户上一个按钮不应该显示&当最后一张幻灯片显示时,下一个按钮不应该显示...如何在滑块中不显示上一个按钮和下一个按钮?
我已经写了这些代码,但不起作用。 ..:
注:每个有.ji活性类,显示用户幻灯片......
if ($('.ji-slider div:last').hasClass('ji-active')) {
$('.ji-next-btn').css('visibility', 'hidden');
} else {
$('.ji-next-btn').css('visibility', 'visible');
}
if ($('.ji-slider div:first').hasClass('ji-active')) {
$('.ji-pre-btn').css('visibility', 'hidden');
} else {
$('.ji-pre-btn').css('visibility', 'visible');
}
什么是我的错?
这是我的HTML:
<div class="ji-slider" data-animation="fadeIn">
<div class="ji-active">
<img src="Images/Slider (1).png">
<p class="ji-caption">This Is First !</p>
</div>
<div>
<img src="Images/Slider (2).png">
<p class="ji-caption">This Is Second !</p>
</div>
<button type="button" class="ji-pre-btn">❮</button>
<button type="button" class="ji-next-btn">❯ </button>
</div>
使用简单的CSS,左箭头隐藏第一张幻灯片和最后=右箭头)
如果没“T工作添加!important
像visibility: hidden !important;
选择类.ji-active
的第一张幻灯片比去同级.ji-pre-btn
和隐藏,为上一张幻灯片我使用:last-of-type
选择器,因为你需要选择最后一个div如果使用:last-child
然后被选中“下一步”按钮。
对不起我的英语不好。
img{
display:block;
background-color: black;
width: 100px;
height: 100px;
}
.ji-slider{
background-color: #eee;
}
.ji-slider > div:first-child.ji-active ~ .ji-pre-btn{
visibility: hidden;
}
.ji-slider > div:last-of-type.ji-active ~ .ji-next-btn{
visibility: hidden;
}
<div class="ji-slider" data-animation="fadeIn">
<div class="ji-active">
<img src="Images/Slider (1).png">
<p class="ji-caption">This Is First !</p>
</div>
<div>
<img src="Images/Slider (2).png">
<p class="ji-caption">This Is Second !</p>
</div>
<button type="button" class="ji-pre-btn">❮</button>
<button type="button" class="ji-next-btn">❯ </button>
</div>
伟大的帮助我的朋友,我不知道如何谢谢你...再次感谢... –
欢迎您! –
试试吧
<div class="ji-slider" data-animation="fadeIn"> <div class="ji-active first_slide"> <img src="Images/Slider (1).png"> <p class="ji-caption">This Is First !</p> </div> <div class=last_slide> <img src="Images/Slider (2).png"> <p class="ji-caption">This Is Second !</p> </div> <button type="button" class="ji-pre-btn">❮</button> <button type="button" class="ji-next-btn">❯ </button> </div>
If($(".first_slide").css("display") == "block"){
$(".ji-pre-btn").hide();
$(".ji-next-btn").show();
}else{
$(".ji-pre-btn").show();
$(".ji-next-btn").hide();
}
$(".ji-next-btn").click(function(){
$(".first_slide").hide();
});
$(".ji-pre-btn").click(function(){
$(".first_slide").show();
});
感谢我的朋友,但我不想给它额外的课... –
显示你的HTML。 –
你在哪里定义这些功能?它应该在'.ji-next-btn'或'.ji-pre-btn'点击函数中。 –
@AwladLiton在这里,你是... –