如果未加載圖像，請刪除輪播箭頭

Question

我目前正在嘗試在沒有圖像的情況下從輪播中刪除箭頭。 我之所以這樣做，僅僅是因為我試圖將多個圖像從數據庫加載到輪播中並進入給定的部分。 此部分已多次創建，並且並不總是包含圖像。

我遇到的問題是，每當引導輪播沒有加載任何圖像時，它只會在側面顯示輪播箭頭 。 這使當前部分看起來很糟，我希望將其丟棄。

當輪播中沒有加載任何圖像時，如何刪除輪播箭頭？

這是一個JsFiddle ，其中包含我到目前為止所做的事情，它受到其他幾篇文章的啟發。 這只會刪除第一張幻燈片上的左箭頭和最后一張幻燈片上的右箭頭。

在這里，您可以預覽沒有圖像時輪播的外觀。 我設置了400px的黑色背景 ，以便更容易發現箭頭。 缺席圖片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');
            });
});

以下是我已經檢查過的解決方案的答案： 鏈接1 鏈接2
預先謝謝 。

Answer 1

使用jQuery，您可以嘗試類似的方法。

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

小提琴