如何在滑块中不显示上一个按钮和下一个按钮？

我想如果滑块的第一张幻灯片是显示用户上一个按钮不应该显示&当最后一张幻灯片显示时，下一个按钮不应该显示...如何在滑块中不显示上一个按钮和下一个按钮？

我已经写了这些代码，但不起作用。 ..：

注：每个有.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">&#10094;</button> 
      <button type="button" class="ji-next-btn">&#10095; </button> 
     </div>

来源

2016-08-03 Ali Bahaari

显示你的HTML。 –

你在哪里定义这些功能？它应该在'.ji-next-btn'或'.ji-pre-btn'点击函数中。 –

@AwladLiton在这里，你是... –

使用简单的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">&#10094;</button> 
 
      <button type="button" class="ji-next-btn">&#10095; </button> 
 
     </div>

来源

2016-08-03 18:23:36

伟大的帮助我的朋友，我不知道如何谢谢你...再次感谢... –

欢迎您！ –

试试吧

<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">&#10094;</button> <button type="button" class="ji-next-btn">&#10095; </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(); 
});

来源

2016-08-03 18:14:19

感谢我的朋友，但我不想给它额外的课... –

如何在滑块中不显示上一个按钮和下一个按钮？

回答

相关问题