Bootstrap 轮播 next prev 按钮控件答案

【问题标题】：Bootstrap carousel next prev button controlBootstrap 轮播 next prev 按钮控件
【发布时间】：2015-08-17 21:25:42
【问题描述】：

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

  $('#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>

【问题讨论】：

你能附上css吗？

标签： javascript jquery html css twitter-bootstrap

【解决方案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();
    }
}

【讨论】：