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();
    }
}

Bootstrap carousel next prev按钮控制

1 个答案: