Is there a way to add a number for the current slide and total slides to the following carousel example using Bootstrap 5? The counters are represented in the carousel-pager div below, with pager-current being the current slide number, and pager-total being the total number of slides.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel-pager">
<div class="pager-current">00</div>
<div class="pager-total">00</div>
</div>
</div>
sett up :
var imgs = [].slice.call(document.getElementsByClassName('container')[0].getElementsByTagName('*'),0);
document.getElementsByClassName('total')[0].innerHTML = imgs.length ;
//create a global variable
var currentImg = 1;
and add this to anything that changes the current img like a button or a timer ...:
document.getElementsByClassName('pager-current')[0].innerHTML = (++currentImg) % imgs.length ;
Related
Angular does not support optional host-element and containerless components so it means every component has its own (div) wrapper but for designing Bootstrap components we need a host-less component (without extra div) to help Bootstrap find its pre-defined structure. (in some use cases especially internal components like inputgroup-text or carousel-item)
An annoying div that destroys the internal structure of Bootstrap for internal Angular components.
I want to know do you have a design suggestion to create Angular components like below?
Bootstrap 5
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
Angular components
<bs-inputgroup class="mb-3">
<bs-inputgroup-text>$</bs-inputgroup-text>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<bs-inputgroup-text>.00</bs-inputgroup-text>
</bs-inputgroup>
Or
Bootstrap 5
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
Angular components
<bs-carousel>
<bs-carousel-item>
<img class="d-block w-100" src="..." alt="..." />
</bs-carousel-item>
<bs-carousel-item>
<img class="d-block w-100" src="..." alt="..." />
</bs-carousel-item>
<bs-carousel-item>
<img class="d-block w-100" src="..." alt="..." />
</bs-carousel-item>
</bs-carousel>
Is it possible to convert each part of Bootstrap 5 to an Angular component without a containerless/host-less feature?
I don't want to use directives just components so please consider that.
Try disabling angular view-encapsulation and see if that works: https://angular.io/guide/view-encapsulation
selector: 'app-no-encapsulation',
template: `
<h2>None</h2>
<div class="none-message">No encapsulation</div>
`,
styles: ['h2, .none-message { color: red; }'],
encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent { }
I'm trying to create a Bootstrap Carousel with a video in the first slide. Everything is working as expected except that the carousel does not take the data-interval into account on the first run of the first slide. When we go back to the slide from another one, it works as expected.
I did a minimal repro here:
https://www.codeply.com/p/avdtdpw8ie
We can see that the first slide gets displayed for about 1 second on the first run, but on its second run it gets displayed for 5 seconds as defined by the data-interval attribute.
Instead of using the data-interval attributes directly on the HTML, you can set the interval using jQuery. This will trigger the Carousel once it's loaded:
$('.carousel').carousel({
interval: 1000
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 400px; height: 300px">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://picsum.photos/400/300" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://picsum.photos/400/300" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://picsum.photos/400/300" />
</div>
</div>
</div>
More info here.
I'm trying to get the slide/total count and got it working somehow. However, when I click next and it goes back to the original first slide, it doesn't show 1/4 but it remains 4/4.
JSFiddel: https://jsfiddle.net/zorw7yLe/
HTML:
<div class="num"></div>
<a class="next" href="#carouselExampleIndicators" role="button" data-slide="next"> -->>></a>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item item active">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="First slide">
<div class="carousel-caption">
<h5>Title of the first image</h5>
<p>Some description of the first image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Second slide">
<div class="carousel-caption">
<h5>Title of the second image</h5>
<p>Some description for the second image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Third slide">
<div class="carousel-caption">
<h5>Title of the third image</h5>
<p>Some description for the third image</p>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Fourth slide">
<div class="carousel-caption">
<h5>Title of the fourth image</h5>
<p>Some description for the fourth image</p>
</div>
</div>
</div>
</div>
JS:
var totalItems = $('.carousel-item').length;
var currentIndex = $('.carousel-item.active').index() + 1;
var down_index;
$('.num').html(''+currentIndex+'/'+totalItems+'');
$(".next").click(function(){
currentIndex_active = $('.carousel-item.active').index() + 2;
if (totalItems >= currentIndex_active)
{
down_index= $('.carousel-item.active').index() + 2;
$('.num').html(''+currentIndex_active+'/'+totalItems+'');
}
});
I suggest you use bootstrap carousel events, you don't need to watch the click directly on your link :
https://getbootstrap.com/docs/4.0/components/carousel/#events
var totalItems = $('.carousel-item').length;
$('#carouselExampleIndicators').on('slide.bs.carousel', function (e) {
$('.num').html((e.to+1)+'/'+totalItems);
});
So your counter will keep track of the current slide
Also, your counter doesn't come back to 1/4 because of your condition (totalItems >= currentIndex_active), at the last slide if you add +2 on your index, that's 5, which is higher than totalItems (4)
You'll need a else to eventualy get the right number, but just use the bootstrap events
<link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCar" class="carousel slide" data-ride="carousel" style="height: 100%;" >
<!-- Wrapper for slides -->
<div id="myNewCar" class="carousel-inner" style="height: 100%; ">
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-1.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-5.jpg" class="img-responsive" />
</div>
</div>
</div>
<script src="~/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="~/assets/js/core/bootstrap.min.js"></script>
I am using bootstrap carousel in my asp.net mvc partial view but the images in the slider are not sliding it only displays the first image
Bootstrap 4 changed .item to .carousel-item. Update your HTML to reflect migration from BS3 to BS4 and your carousel will work as expected. So change:
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
to:
<div class="carousel-item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
And repeat for each iteration of your slides. For additional information on Bootstrap 4s Carousel component reference the documentation for the current version (4.0.0-beta2):
https://getbootstrap.com/docs/4.0/components/carousel/
i.e. two carousels in the same location but one is always hidden, with two buttons (anchors?) above to turn either one on:
<div class="row">
<div class="col-lg-12">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
My JS does not appear to be working, this is what I have in my JS file:
var floorsCarousel = document.getElementById("floorsCarousel");
var spaceCarousel = document.getElementById("spaceCarousel");
function floorPlans() {
if (floorsCarousel.style.display==="none") {
floorsCarousel.style.display="inherit";
}
if (spaceCarousel.style.display!=="none") {
spaceCarousel.style.display="none";
}
return false;
}
function spacePlans() {
if (spaceCarousel.style.display==="none") {
spaceCarousel.style.display="inherit";
}
if (floorsCarousel.style.display!=="none") {
floorsCarousel.style.display="none";
}
return false;
}
JSFiddle
I have created a solution for you that does what you need here. I've created "buttons" to toggle which carousel you wish to open and wrapped the carousel's in a div with the attr's id="Car-#" class="Car-toggle"
Html
<div class="row">
<button class="toggleCar" data-for="Car-1">Toggle 1</button>
<button class="toggleCar" data-for="Car-2">Toggle 2</button>
<div class="col-lg-12">
<div id="Car-1" class="Car-toggle">carousel One
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
<div id="Car-2" class="Car-toggle">carousel Two
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript (JQuery since your using bootstrap)
$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
$('.Car-toggle').hide();
$('#'+CarWrapperName).show();
});
//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();