Question

127

bootstrap carousel hide controls on first and last

rated 0 times [ 132] [ 5] / answers: 1 / hits: 22025 / 11 Years ago, mon, december 9, 2013, 12:00:00

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

thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

longd

Add To Favorites

Follow

Total Points: 616

Total Questions: 110

Total Answers: 101

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

longd questions

1 JS to TS: Type 'null' is not assignable to type 'number'

Mon, Jan 24, 22, 00:00, 2 Years ago

1 Typescript class variables and error: refers to a value, but is being used as a type here. . Did you mean typeof' .... Why exactly?

Wed, May 26, 21, 00:00, 3 Years ago

1 Slick Slider two rows, how?

Sat, Apr 3, 21, 00:00, 3 Years ago

1 VS Code auto formatting with prettier

Mon, Jul 13, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: import declarations may only appear at top level of a module:1:18 asking again

Tue, Jun 9, 20, 00:00, 4 Years ago

View All

answered 11 Years ago dillionsalvadorg · Accepted Answer

Bootply link

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

    } 

}