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屋！