Newbe Dev Stack

Answer : Update Bootstrap 4 Bootstrap 4 has utility classes that make it easier to create a full screen carousel. For example, use the min-vh-100 class on the carousel-item content... <div class="carousel slide" data-ride="carousel"> <div class="carousel-inner bg-info" role="listbox"> <div class="carousel-item active"> <div class="d-flex align-items-center justify-content-center min-vh-100"> <h1 class="display-1">ONE</h1> </div> </div> </div> </div> Full screen carousel demo This works to make the carousel items full screen , but carousel items that contain images or videos that have a specific size & aspect ratio require further consideration. Since the viewport h/w ratio is likely to be different than the image or video h/w ratio, usually background ...

Answer : There are just two minor things here. The first is in the following carousel indicator list items: <li data-target="carousel" data-slide-to="0"></li> You need to pass the data-target attribute a selector which means the ID must be prefixed with # . So change them to the following: <li data-target=" # carousel" data-slide-to="0"></li> Secondly, you need to give the carousel a starting point so both the carousel indicator items and the carousel inner items must have one active class. Like this: <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active" ></li> <!-- Other Items --> </ol> <div class="carousel-inner"> <div class="item active "> <img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" /> </d...

Answer : Updated 2019... Bootstrap 4 The carousel has changed in 4.x, and the multi-slide animation transitions can be overridden like this... .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left{ transform: translateX(0); } Bootstrap 4 Alpha.6 Demo Bootstrap 4.0.0 (show 4, advance 1 at a time) Bootstrap 4.1.0 (show 3, advance 1 at a time) Bootstrap 4.1.0 (advance all 4 at once) Bootstrap 4.3.1 responsive (show multiple, advance 1) new Bootstrap 4.3.1 carousel with cards new Another option is a responsive carousel that only shows and advances 1 slide on smaller screens , but shows multiple slides are larger screens . Instead of cloning the slides like the previous example, this one adjusts the CSS and use jQ...

Answer : DEMO Well you can make use of slide.bs.carousel option of bootstrap carousel and make the respective indicators active depending on the current slide as below: var $carousel = $('#myCarousel'); //get a reference $carousel.carousel(); $carousel.bind('slide.bs.carousel', function (e) { //attach its event var current=$(e.target).find('.item.active'); //get the current active slide $('.carousel-indicators li').removeClass('active') //remove active class from all the li of carousel indicator var indx=$(current).index(); //get its index if((indx+2)>$('.carousel-indicators li').length) indx=-1 //if index exceeds total length of indicators present set it to -1 $('.carousel-indicators li:nth-child('+(indx+2)+')').addClass('active');//set the respective indicator active }); UPDATE The answer given above just shows how to make indicators active when they are placed ...