Bootstrap轮播下一个上一个按钮控制

Question

I have a multiple items carousel. How can I hide the left control if the carousel is on the first item, and how can I hide the right control when the carousel is on the last item. I've tried codes below but it doesn't work.

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

You are on the right track. Your code doesn't work, because $this is not defined. This has to be $(this) .

Secondly, the slid event should be named slid.bs.carousel .

Thirdly, your if-statement will not work correctly. Assume that the right control is hidden and assume that the carousel continues to the first slide. Your code will hide the left control, but the right control remains hidden.

So, you need a separate if-else to either hide or show the left control. And another if-statement for the right control.

Your code may look like:

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