スライダーの前のボタンと次のボタンを表示しない方法は？

Question

スライダーの最初のスライドが最後のスライドが表示されているとき、前ボタンが[次へ]ボタンは、私はこれらのコードを書いていますが動作しません...

を示してはならない、&を表示してはならないユーザーに表示されている場合は私が望んでいました。 ..：

注：.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です：それはdidnの場合

 <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> 

Answer 1

使用シンプルなCSS、最後のための最初のスライドと右の矢印のために隠された左矢印=）

試してみてください仕事は、!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>

Answer 2

は

<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(); 
});