如何在滑塊中不顯示上一個按鈕和下一個按鈕？

我想如果滑塊的第一張幻燈片是顯示用戶上一個按鈕不應該顯示&當最後一張幻燈片顯示時，下一個按鈕不應該顯示...如何在滑塊中不顯示上一個按鈕和下一個按鈕？

我已經寫了這些代碼，但不起作用。 ..：

注：每個有.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

感謝我的朋友，但我不想給它額外的課... –

如何在滑塊中不顯示上一個按鈕和下一個按鈕？

回答

相關問題