bootstrap carousel 在第一个和最后一个隐藏控件 [英] bootstrap carousel hide controls on first and last

问题描述

如果轮播在第一项上，我如何隐藏左侧控件，以及当轮播位于最后一项时如何隐藏右侧控件.

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.

我下面的代码成功隐藏了控件，但在页面加载时，就好像轮播第一个项目在中间一样，用户可以通过左侧或右侧控件一直浏览.

My code below hides the control successfully but on page load it is as if the carousel first item is in the middle and the user can either go all the way through via the left or right controls.

http://bootply.com/99354

谢谢

推荐答案

Bootply 链接

$('#myCarousel').on('slid', '', checkitem);  // on caroussel move
$('#myCarousel').on('slid.bs.carousel', '', checkitem); // on carousel move

$(document).ready(function(){               // on document ready
    checkitem();
});

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

这篇关于bootstrap carousel 在第一个和最后一个隐藏控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！