javascript - Bootstrap carousel next prev 按钮控件

Question

我有一个多元素轮播。如果轮播在第一项上，如何隐藏左侧控件，当轮播在最后一项上时，如何隐藏右侧控件。我试过下面的代码，但它不起作用。

  $('#kesfetCarousel').on('slid', '', checkitem);
  checkitem();

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

 <div class="categoryBlock col-md-12 carousel slide" id="kesfetCarousel" data-ride="carousel">
<div class="subject">
    <div class="nextPrev">
        <div class="next"><a class="right carousel-control" href="#kesfetCarousel" role="button" data-slide="next"><i class="icon-rigthArrow2Black"></i> Next</a></div>
        <div class="prev"><a class="left carousel-control" href="#kesfetCarousel" role="button" data-slide="prev"><i class="icon-leftArrowBlack2"></i> Prev</a></div>
    </div>
</div>
<div class="carousel-inner" role="listbox">
    <div class="carousel-inner" role="listbox">
        <div class="categoryList col-md-12 item">
            <div class="categoryContent col-md-4">
                <img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
            </div>
            <div class="categoryContent col-md-4">
                <img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
            </div>
        </div>                                              
    </div>
</div>
<div class="carousel-inner" role="listbox">
    <div class="carousel-inner" role="listbox">
        <div class="categoryList col-md-12 item">
            <div class="categoryContent col-md-4">
                <img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
            </div>
            <div class="categoryContent col-md-4">
                <img width="300" height="200" src="http://cdn.yemek.com/wp-content/uploads/2015/08/hamursuz-pizza-tarifi-720x450.jpg"></a>
            </div>
        </div>                                              
    </div>
</div>

Answer 1

您走在正确的轨道上。您的代码不起作用，因为 $this 未定义。这必须是 $(this)。

其次，slid 事件应该命名为slid.bs.carousel。

第三，您的 if 语句将无法正常工作。假设右侧控件被隐藏，并假设轮播继续到第一张幻灯片。您的代码将隐藏左侧控件，但右侧控件保持隐藏状态。

因此，您需要一个单独的 if-else 来隐藏或显示左侧控件。还有一个用于右控件的 if 语句。

您的代码可能如下所示:

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

function checkitem()
{
    if($('.carousel-inner .item:first').hasClass('active')) {
        $(this).children('.left.carousel-control').hide();
    } else {
        $(this).children('.left.carousel-control').show();
    }

    if($('.carousel-inner .item:last').hasClass('active')) {
        $(this).children('.right.carousel-control').hide();
    } else {
        $(this).children('.right.carousel-control').show();
    }
}