如果圖像未加載，請刪除傳送帶箭頭

我目前正試圖在沒有圖像存在時從傳送帶中刪除箭頭。我試圖這樣做的原因很簡單，因爲我試圖從數據庫將數個圖像加載到旋轉木馬中進入給定部分。此部分重新創建多次，並不總是包含圖像。如果圖像未加載，請刪除傳送帶箭頭

是我遇到的問題是，每當引導轉盤沒有加載任何圖像，它只是顯示在旁邊的轉盤箭頭。這給當前部分帶來了不好的印象，我想解決這個問題。

如何在傳送帶中未加載任何圖像的情況下移除傳送帶箭頭？

這是一個JsFiddle其中包含我迄今爲止所做的，它受到其他幾個職位的激勵。這隻會刪除第一張幻燈片上的左箭頭和上一張幻燈片上的右箭頭。

在這裏，您可以預覽每當有缺席圖像時轉盤看起來如何。我已經設置了黑色背景的400px爲了使箭頭更容易被發現。 Absent Images JsFiddle

這裏是我的代碼至今：

<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代碼：

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 1 Link 2
預先感謝您。

來源

2017-03-07 ZombieChowder

使用jQuery你可以嘗試像..

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

fiddle

來源

2017-03-07 12:12:27 sol

黨，謝謝！ – ZombieChowder

如果圖像未加載，請刪除傳送帶箭頭

回答

相關問題