イメージがロードされていない場合は、カルーセル矢印を削除してください。

Question

イメージが存在しない場合、現在カルーセルから矢印を削除しようとしています。私がそのようにしようとしているのは、データベースからカルーセルにいくつかの画像をあるセクションにロードしようとしているからです。このセクションは複数回再作成され、必ずしも画像が含まれているとは限りません。

私が午前問題は、ブートストラップカルーセルはどんなイメージがロードされていない時はいつでも、それだけでカルーセル矢印側のを表示する、ということです。これは現在のセクションに悪い見方を与え、私はそれを処分したいと思います。

カルーセルに画像 がない場合、カルーセルの矢印を削除するにはどうすればよいですか？

ここには私がこれまで行ってきたことが入っているJsFiddleがあります。それはいくつかの他の投稿からインスピレーションを受けています。これは、最初のスライドのの左矢印と、最後のスライドのの右矢印を削除します。

ここでは、画像がないときにどのようにカルーセルが表示されるかをプレビューできます。 黒い背景を400pxに設定して、矢印をより簡単に見つけることができます。

<div class="container"> 
     <div id="main_area"> 
       <!-- Slider --> 
       <div class="row"> 
        <div class="col-xs-12" id="slider"> 
         <!-- Top part of the slider --> 
         <div class="row"> 
          <div class="col-sm-8" id="carousel-bounding-box"> 
           <div class="carousel slide" id="myCarousel"> 
            <!-- Carousel items --> 
            <div class="carousel-inner"> 
             <div class="active item" data-slide-number="0"> 
             <img src="http://placehold.it/770x300&text=one"></div> 

             <div class="item" data-slide-number="1"> 
             <img src="http://placehold.it/770x300&text=two"></div> 

             <div class="item" data-slide-number="2"> 
             <img src="http://placehold.it/770x300&text=three"></div> 

             <div class="item" data-slide-number="3"> 
             <img src="http://placehold.it/770x300&text=four"></div> 

             <div class="item" data-slide-number="4"> 
             <img src="http://placehold.it/770x300&text=five"></div> 

             <div class="item" data-slide-number="5"> 
             <img src="http://placehold.it/770x300&text=six"></div> 
            </div><!-- Carousel nav --> 
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
             <span class="glyphicon glyphicon-chevron-left"></span>          
            </a> 
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" id="arrow-right"> 
             <span class="glyphicon glyphicon-chevron-right"></span>          
            </a>         
            </div> 
          </div> 
          </div> 
         </div> 
        </div> 
       </div><!--/Slider--> 
     </div> 

のjQueryコード：ここで

Absent Images JsFiddleは、私がこれまで持っているコードです

ここ

jQuery(document).ready(function($) { 

    $('.carousel').carousel({ 
    interval: false, 
}) 

$(document).ready(function() {    // on document ready 
    checkitem(); 
}); 

      $('#myCarousel').on('slid.bs.carousel', checkitem); 

      function checkitem()      // check function 
      { 
      var $this = $('#myCarousel'); 
      if ($('.carousel-inner .item:first').hasClass('active')) { 
       $this.children('.left.carousel-control').hide(); 
      } else if ($('.carousel-inner .item:last').hasClass('active')) { 
       $this.children('.right.carousel-control').hide(); 
      } else { 
       $this.children('.carousel-control').show(); 

      } 
      } 

     $("img").error(function(){ 
     $(this).hide('#arrow-right'); 
      }); 
}); 

私はすでに解決策をチェックした答えです： Link 1Link 2
は、事前にありがとう。

Answer 1

のjQueryを使用して、あなたが...

$(document).ready(function(){ 
    if($('.carousel-inner .item img').attr('src') == '') { 
     $('.carousel-control').css('display', 'none'); 
    } 
}); 

fiddle