Change content based on active Bootstrap Carousel Slide - javascript

I just took the basic carousel from the bootstrap website and want to integrate it into my web application. My problem is that I want to adjust the content of my website based on the current active slide of the carousel...is that possible?
If the first slide is active, I want to show div One, if the second slide is active, I want to show div Two.
I think I somehow just need to get the active index of the carousel to write my js script?
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" onclick="changeContentBasedOnActiveSlide()" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1" onclick="changeContentBasedOnActiveSlide()"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" id="one">
<img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>One</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item" id="two">
<img src="https://images.squarespace-cdn.com/content/v1/5600f472e4b0a4c5b4e2f083/1556255337364-97VLFN57A2DNWR9UQOB8/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/40743.jpg?format=2500w" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Two</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" onclick="changeContentBasedOnActiveSlide()" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" onclick="changeContentBasedOnActiveSlide()" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="divOne">
Slide One
</div>
<div id="divTwo">
Slide Two
</div>
Thanks to the answer I worked something out. This works for me...for sure it can be improved...
function changeContentBasedOnActiveSlide(){
var slideOne = document.getElementById("one").className;
var slideTwo = document.getElementById("two").className;
var one = document.getElementById("divOne");
var two = document.getElementById("divTwo");
if(slideOne.localeCompare("carousel-item active") === 0){
one.style.display = "none";
two.style.display = "block";
} else if(slideTwo.localeCompare("carousel-item active") === 0){
one.style.display = "block";
two.style.display = "none";
} else {
console.log("No active slide.")
}
}

You may add a function to next/prev buttons.
Add additional classes to both divs with carousel-item to make it unique.
And after pressing next/prev u check if active div has that unique class and then distplay div class "one" or "two".

Related

Instead of next and previous arrow, Is it possible to show the next and previous slider image in bootstrap 4?

I am using a bootstrap 4 image carousel slider for my website. I tried the below code and it's working.
Now What I am doing is, Instead of next and previous arrow I have to show the next and previous slider image. Is it possible?
This is an previous arrow example. I have to display the image instated of arrow.
Example
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
You can overwrite carousel class and set your own css on next and prev images
try this code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<style>
.carousel-control-prev-icon{width: 100px;height:250px;}
.carousel-control-next-icon{width: 100px;height:250px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
var next_src = $('.carousel-inner .active').next().find('.d-block').attr('src');
var prev_src = $('.carousel-item').last().find('.d-block').attr('src');
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
$('#carouselExampleFade').on('slid.bs.carousel', function () {
var next_src = $('.carousel-inner .active').next().find('.d-block').attr('src');
if(next_src == undefined){
next_src = $('.carousel-item').first().find('.d-block').attr('src');
}
var prev_src = $('.carousel-inner .active').prev().find('.d-block').attr('src');
if(prev_src == undefined){
prev_src = $('.carousel-item').last().find('.d-block').attr('src');
}
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
})
</script>
if you want to use background image as slide then use this jquery code
var next_src = $('.carousel-inner .active').next().css('background-image').replace('url(','').replace('")','').replace('"','');
var prev_src = $('.carousel-item').last().css('background-image').replace('url(','').replace('")','').replace('"','');
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
$('#carouselExampleFade').on('slid.bs.carousel', function () {
var next_src = '';
if($('.carousel-inner .active').next().length > 0){
next_src = $('.carousel-inner .active').next().css('background-image').replace('url(','').replace('")','').replace('"','');
}else{
next_src = $('.carousel-item').first().css('background-image').replace('url(','').replace('")','').replace('"','');
}
var prev_src = $('.carousel-inner .active').prev().find('.d-block').attr('src');
if($('.carousel-inner .active').prev().length > 0){
prev_src = $('.carousel-inner .active').prev().css('background-image').replace('url(','').replace('")','').replace('"','');
}else{
prev_src = $('.carousel-item').last().css('background-image').replace('url(','').replace('")','').replace('"','');
}
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
})
From my understanding the functionality is not supported by bootstrap, but you can approach this with adding a custom class to your carousel and then using css to add a background image to the arrows
So for example:
<a class="carousel-control-prev" href="#carouselExampleFade
Will become:
<a class="carousel-control-prev carousel-back-arrow" href="#carouselExampleFade
In this line here you can add carousel-back-arrow into the class attribute, then you can add a tag in the header.
Inside you can then style your custom class
.carousel-back-arrow { background-image: url(path-to-your-image); background-size: contain; }
You can read about classes here:
https://www.w3schools.com/html/html_classes.asp
Here you can see an example of image inside elem with css:
https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/
Yes you can display previous & next image in sliders with arrow mark by using bootstrap carousel
check the demo link i mentioned here, i hope it will useful for you
https://codepen.io/glebkema/pen/daLzpL
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="//placehold.it/900x300/c69/f9c/?text=1" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="//placehold.it/900x300/9c6/cf9/?text=2" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="//placehold.it/900x300/69c/9cf/?text=3" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Hi try this code & refer my screenshot too
your images
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>CodePen Demo</title>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<link rel="canonical" href="https://codepen.io/glebkema/pen/daLzpL">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style class="INLINE_PEN_STYLESHEET_ID">
.show-neighbors {
overflow: hidden;
}
.show-neighbors .carousel-indicators {
margin-right: 25%;
margin-left: 25%;
}
.show-neighbors .carousel-control-prev,
.show-neighbors .carousel-control-next {
background: rgba(255, 255, 255, 0.3);
width: 25%;
z-index: 11;
/* .carousel-caption has z-index 10 */
}
.show-neighbors .carousel-inner {
width: 150%;
left: -25%;
}
.show-neighbors .carousel-item-next:not(.carousel-item-left),
.show-neighbors .carousel-item-right.active {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.show-neighbors .carousel-item-prev:not(.carousel-item-right),
.show-neighbors .carousel-item-left.active {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.show-neighbors .item__third {
float: left;
position: relative;
/* captions can now be added */
width: 33.33333333%;
}
</style>
<script src="https://static.codepen.io/assets/editor/iframe/iframeConsoleRunner-7f4d47902dc785f30dedcac9c996b9f31d4dfcc33567cc48f0431bc918c2bf05.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRefreshCSS-e03f509ba0a671350b4b363ff105b2eb009850f34a2b4deaadaa63ed5d970b37.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRuntimeErrors-29f059e28a3c6d3878960591ef98b1e303c1fe1935197dae7797c017a3ca1e82.js"></script>
</head>
<body>
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide show-neighbors" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide"" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script id="INLINE_PEN_JS_ID">
$('.carousel-item', '.show-neighbors').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}).each(function () {
var prev = $(this).prev();
if (!prev.length) {
prev = $(this).siblings(':last');
}
prev.children(':nth-last-child(2)').clone().prependTo($(this));
});
//# sourceURL=pen.js
</script>
</body>
</html>

button to toggle between 2 layouts is not working with javascript

My idea is to provide a switch which toggles between a bootstrap carousel and cards, basically one of them will be visible when the the button is pressed(one will be invisible at all times). First I'm trying to make my carousel(existing) invisible, however my javascript code isn't working. I'm pretty new to javascript, I hope I'm not making some stupid mistake. Any help is appreciated, thank you.
function change(toggles) {
var which = document.getElementById("format1");
if (toggles.value == "yes") {
format1.style.display = "block";
toggles.value = "no";
} else {
toggles.value = "yes";
}
};
<div class=" container container1">
<br>
<div class="card card-body" id="card-mine">
<span>[...]</span>
</div>
<div id="format1">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators" style="margin-bottom: 3%;">
[...]
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-color: green">
[...]
</div>
<!-- Slide Five - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-color: #8D6E63">
[...]
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
</a>
</div>
<br>
</div>
</div>
<button id="toggles" class="button toggles" value="yes" onclick="change(this)">Click</button>
</div>
I tried your code and the problem is in the logic, you are setting it to visible on the first if block, it was suppose to be invisible.
if (toggles.value == "yes") {
which.style.display = "none";
toggles.value = "no";
} else {
toggles.value = "yes";
which.style.display = "block";
}

Bootstrap3 Image Below Caption, Rescale Image To Fit

I'm creating a simple carousel with HTML and JS. I have it mostly how I want it to look now, unfortunately there are a few issues:
Running The Snippet:
1) I want the caption to be in the space below the image, not on it. I've done what I can with CSS based on my minor skills and can't figure it out.
2) Also, I want the pictures resized and centred so the fit into the carousel, instead of most of it being cropped out.
Carousel Juts Out
1) I've made the website responsive, and the container has style="text-align:center;text-align: justify;". However if you look at the image below, in some cases when the browser window is minimised,the carousel juts out. How do I resolve this?
.carousel-caption {
position: relative;
left: auto;
top: auto;
bottom: -95px;
}
.carousel-inner {
overflow: visible;
padding-bottom: 95px;
}
#serviceSlider .item {
height: 400px;
}
#slide1{
background:url('https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg'); center no-repeat;
}
#slide2{
background:url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg'); center no-repeat;
}
#slide3{
background:url('https://cdn.pixabay.com/photo/2018/05/09/22/44/piglet-3386356_960_720.jpg'); center no-repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
width: 100%;
margin: auto;
}
</style>
<div class="container" style="text-align:center;text-align: justify;">
<br>
<div id="serviceSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#serviceSlider" data-slide-to="0" class="active"></li>
<li data-target="#serviceSlider" data-slide-to="1"></li>
<li data-target="#serviceSlider" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h3>Dog</h3>
<p>Cute Corgi.</p>
</div>
</div>
<div class="item" id="slide2">
<div class="carousel-caption">
<h3>Cat</h3>
<p>Cute cat.</p>
</div>
</div>
<div class="item" id="slide3">
<div class="carousel-caption">
<h3>Pigs</h3>
<p>Sleepy pigs.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#serviceSlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#serviceSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
You don't have to do much just make some changes in class of caption carousel. Try copy and pasting to see if it works. No additional changes in css.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
<div class="text-center d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
<div class="text-center d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
<div class="text-center d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Number of items in Bootstrap Carousel returns 0

I am trying to get the length (total number) of items in a Bootstrap carousel.
However my code keeps returning 0:
var totalItems = $('.carousel-item').length;
The data-ride is declared in the parent div:
<div id="carouselExampleIndicators" class="carousel slide carousel-fade my-4 " data-ride="carousel">
When I attempt to call the Carousel manually with :
$('.carousel').carousel()
I get an exception in the console:
$('.carousel').carousel() is not a functions; is undefined
Not sure if the two issues are related.
The carousel items are tagged with carousel-item class:
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/colesbay.jpg" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>Second slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
All the examples I have checked on line use this methodology to count the number of items so not sure where I am going wrong. I have also checked this answer amongst others but could not find a solution.
Full code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--V4 does not support glyphicons so use this CDN and pre-append fa fa to all glphicon glyphicon calls-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--Bootstrap JQuery and Popper.js and custom Bootstap JS-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
The Bootstrap carousel:
<!--Main body - Botstrap Carousle-->
<div class="col-lg-9">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade my-4 " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
<!--
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>-->
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!--Set the height of div class to set height of all images as externa css imageCarsoule to stop jumping-->
<div class="carousel-inner" style="height: 400;" role = "listbox">
<!--Remove class="carousel-item-active so we can randomly assign image with carousel.js
<div class="carousel-item-active">-->
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/landscapes/Old Sheds Evandale (Acrylic).tiff" alt="First Mage">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/colesbay.jpg" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>Second slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/landscapes/Sheoaks at Coles Bay (Acrylic & Coloured Pencil).tiff" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>third slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel" src="images/fullpics/landscapes/Winter Drovers (Egg Tempera).jpg" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>Fourth slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid imageCarousel "src="images/fullpics//landscapes/Early Start (Oil).tiff" alt="Image 2">
<div class="carousel-caption d-none d-md-block text-center">
<h5>Fifth / Last slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
My external JS file:
$(document).ready(function() {
$("#ccarouselExampleIndicators").carousel({
interval: 1000,
ride:true
});
console.log($(".carousel-item").length);
});
Maybe it can be the subject of libraries, take the libraries from the official bootstrap page
$(document).ready(function() {
$("#carouselExampleSlidesOnly").carousel({
interval: 1000,
ride:true
});
console.log($(".carousel-item").length);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleSlidesOnly" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
The carousel function needs to be called by id in your case.The carousel id is carouselExampleIndicators so you need to call it by
$('#carouselExampleIndicators').carousel()
Here is an example using your template.
also you put style="height: 400;" which is not a valid css rule
style="height: 400px;" (note: 400px won't show labels)
and finally there is no first slide marked as active so the carousel won't start. Use
<div class="carousel-item active">
on one slide

Bootstrap Carousel Change a particular color div

i´m a little new here, i was looking for the answer and i didn´t find it.
I'm starting as a web designer/web developer.
I have a carousel of images in bootstrap, and a div at the top of it. This div is a simple title to the page.
i want to change the color title for a particular image when this is "active".
I tried this (because i saw that the image that is showing change its class name: "carousel-item" to: "carousel-item active") , but doesn't work.
This is my HTML:
<div id="titulo">Game of thrones</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item " data-interval="3000">
<img src="/img/portrait.jpg" class="d-block w-100" alt="throne">
</div>
<div class="carousel-item active" id="dragon" data-interval="3000">
<img src="/img/dragon.jpeg" class="d-block w-100" alt="got" data-interval="3000">
</div>
<div class="carousel-item" >
<img src="/img/houses.jpg" class="d-block w-100" alt="houses" data-interval="3000">
</div>
<div class="carousel-item" >
<img src="/img/evil.jpeg" class="d-block w-100" alt="badguy" data-interval="3000">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
const titulo= document.querySelector("#titulo");
const dragon=document.querySelector("#dragon");
if(dragon.classList.contains("active")){
titulo.style.color = "black";
}
</script>
The reason your current code isn't working is because the script only runs once when the page is loaded. Bootstrap comes with events that you can attach a function to which means you can check the class each time the carousel moves. You can read more about carousel events here.
Using the example in the link you can use the following, without changing your existing code too much:
$('#carousel').on('slid.bs.carousel', function () {
const titulo = document.querySelector("#titulo");
const dragon = document.querySelector("#dragon");
if (dragon.classList.contains("active")) {
titulo.style.color = "black";
}
});
Note: the event is slid not slide since the active class isn't applied until the slide transition has completed.
What might be better is to read the relatedTarget of the event and check if that is the dragon:
$('#carousel').on('slide.bs.carousel', function (evt) {
const titulo = document.querySelector("#titulo");
if (evt.relatedTarget.id === 'dragon') {
titulo.style.color = "black";
}
});

Categories

Resources