does anyone know how to measure the time that an image in an Bootstarp 5 carousel (see below) is visible for the user? The idea is to measure the time that the user is looking at a specific image (e.g. image of a product) in the carousel.
f.e. the time in milliseconds that the image "image_1" is visible (open).
Many thanks,
````
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="image_1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="image_2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="image_3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
````
Something like this could work:
var intervalTime = 100;
var carousel = document.getElementById('carouselExampleControls')
var timesMilliseconds = {
0: 0
};
var currentSlideIndex = 0;
var interval = setInterval(function() {
if (timesMilliseconds.hasOwnProperty(currentSlideIndex)) {
timesMilliseconds[currentSlideIndex] += intervalTime;
} else {
timesMilliseconds[currentSlideIndex] = intervalTime;
}
}, intervalTime);
carousel.addEventListener('slide.bs.carousel', function (event) {
var currentIndex = currentSlideIndex.toString();
var currentTotalTime = timesMilliseconds[currentSlideIndex].toString();
console.log('Looked at slide ' + currentIndex + ' for a total of ' + currentTotalTime + ' ms');
currentSlideIndex = event.to;
});
https://jsfiddle.net/412nu3dy/2/
Related
I've got a bootstrap5 carousel which works fine until I generate the carousel after the Promise is fulfilled. See the example below, if I UNcomment the row in the start() function it stops working and only the first image is displayed.
Does anybody know why I cannot generate carousel dynamically once some Promise is fullfiled?
<body>
<div class="carousel-wrapper">
</div>
</body>
<script>
function insertCarousel() {
let carousel = `<div class="col-md-4">
<!-- carousel start -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class='tempimg' src="./items_photos/10_100.jpeg" data-trueimg="./items_photos/10_100.jpeg" class="d-block w-100" width="250" height="250" alt="...">
</div>
<div class="carousel-item">
<img class='tempimg' src="./items_photos/10_200.jpeg" data-trueimg="./items_photos/10_200.jpeg" class="d-block w-100" width="250" height="250" alt="...">
</div>
<div class="carousel-item">
<img class='tempimg' src="./items_photos/1_200.jpeg" data-trueimg="./items_photos/1_200.jpeg" class="d-block w-100" width="250" height="250" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- carousel end -->
</div>`;
document.querySelector('.carousel-wrapper').insertAdjacentHTML('beforeend', carousel);
}
function delay() {
return new Promise((resolve, reject) => {
setTimeout(resolve,1000);
});
}
async function start() {
/* if I apply the following row, carousel stops working and it just displays the first image */
// await delay();
insertCarousel();
}
start();
</script>
I have sorted it out. I had to initiate a new carousel and run cycle method. See the code:
function delay() {
return new Promise((resolve, reject) => {
setTimeout(resolve,1000);
});
}
async function start() {
await delay();
insertCarousel();
let myCarousel = document.querySelector('#carouselExampleIndicators');
let carousel = new bootstrap.Carousel(myCarousel, {
interval: 3000
}).cycle();
}
start();
Unfortunately, this is a remarkable stupid question. However, I could not figure out how to make a working click counter für the Bootstrap carousel button. The problem is the span element for the previous and next icons.
The button counter does not count clicks on the repective span element.
$('button').click(function(btn) {
btn.target.dataset.click_counter_hidden = (+btn.target.dataset.click_counter_hidden || 0) + 1;
$('#click_search_left').val($('button[data-id="slider_left"]').attr("data-click_counter_hidden") || 0);
$('#click_search_right').val($('button[data-id="slider_right"]').attr("data-click_counter_hidden") || 0);
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<div class=class="carousel-item active">
<div class="carousel-item" id="example1">
<img id="example_1" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_1">
</div>
<div class="carousel-item" id="example2">
<img id="example_2" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_2">
</div>
<div class="carousel-item" id="example3">
<img id="example_3" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_1">
</div>
</div>
<button type="button" id='slider_left' data-id="slider_left" class="carousel-control-prev tracked_element" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" id="prev_icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" id='slider_right' data-id="slider_right" class="carousel-control-next tracked_element" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" id="next_icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<input type="hidden" name="click_search_left" id="click_search_left" value="0" />
<input type="hidden" name="click_search_right" id="click_search_right" value="0" />
Add your counter data attribute to the two buttons (this is just to help initialize).
<button data-click_counter_hidden="0">
Check to see if click event was on button. If not it must've been the child span element so get the parent (the button).
$('button').on('click', function(e){
$t = $(e.target);
if (!$t.is('button')){
$t = $t.parent();
}
clicks = parseInt($t.data('click_counter_hidden')) + 1;
$t.data('click_counter_hidden', clicks);
// display counter value elsewhere if needed
});
As I said in the title, I am trying to use JavaScript to update the favicon (shortcut icon) depending on Bootstrap Carousels.
For example, As the carousel changes to the second slide, 2.ico should be the favicon, as the carousel changes to the third slide, 3.ico should be the favicon. Here's what I have done.
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="shortcut icon" href="1.ico" type="image/x-icon">
</head>
<!-- bootstrap boilerplate html for carousels -->
<body>
<div id="carouselExampleControls" 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>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
<script src="bootstrap.js">
<script>
if ( /*slide 2 is active*/ ) {
document.getElementsByTagName("link")[0].setAttribute("href", "2.ico");
}
if ( /*slide 3 is active*/ ) {
document.getElementsByTagName("link")[0].setAttribute("href", "3.ico");
}
</script>
You need to add an event listener to your carousel. You have more detail explanation in the docs page. But a simple javascript example for your HTML would be
<script>
$(document).ready(function() {
const myCarousel = document.getElementById('carouselExampleControls')
myCarousel.addEventListener('slid.bs.carousel', function() {
let currentIndex = $('.carousel-item.active').index() + 1;
// do something...
})
});
</script>
I'm making a carousel slide with Bootstrap carousel. I want to stop auto-playing of slides and I would like to make a button, which controls to toggle the auto-playing on/off.
I've searched about it already and it recommended me to add an attribute data-interval=false for the carousel div or to add a script: $('.carousel').carousel({ interval: false, }).
It stops auto-playing when the above values are set as default value but when I want to toggle the auto-playing on/off, it doesn't work and keeps auto-playing.
Here's the script I have so far:
var total = $('.carousel-item').length;
var currentIndex = $('div.active').index() + 1;
$('.current_slide').html(currentIndex + ' / ' + total);
$('.carousel').on('slid.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
var text = currentIndex + ' / ' + total;
$('.current_slide').html(text);
});
function navAutoplay() {
if ($('.if_paused').hasClass('carousel_now')) {
$('*.carousel_now').removeClass('carousel_now');
$('.if_started').addClass('carousel_now');
}
else {
$('*.carousel_now').removeClass('carousel_now');
$('.if_paused').addClass('carousel_now');
}
}
$(document).ready(function() {
if ($('.if_started').hasClass('carousel_now')) {
$('.carousel').carousel({
interval: 7000
});
}
else {
$('.carousel').carousel({
interval: false
});
}
})
The html code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carouselExampleFade" data-interval="7000" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel_nav">
<div class="current_slide">
</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>
<div class="corousel_nav_autoplay">
<a class="if_paused">
<span onclick="navAutoplay()"></span>
</a>
<a class="if_started carousel_now">
<span onclick="navAutoplay()"></span>
</a>
</div>
<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>
</div>
<div id="carouselExampleFade" data-interval="7000" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/slide01_01.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/slide02_01.png" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel_nav">
<div class="current_slide">
</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>
<div class="corousel_nav_autoplay">
<a class="if_paused">
<span onclick="navAutoplay()"></span>
</a>
<a class="if_started carousel_now">
<span onclick="navAutoplay()"></span>
</a>
</div>
<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>
</div>
<script>
var total = $('.carousel-item').length;
var currentIndex = $('div.active').index() + 1;
$('.current_slide').html(currentIndex + ' / ' + total);
$('.carousel').on('slid.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
var text = currentIndex + ' / ' + total;
$('.current_slide').html(text);
});
</script>
<script>
function navAutoplay() {
if ($('.if_paused').hasClass('carousel_now')) {
$('*.carousel_now').removeClass('carousel_now');
$('.if_started').addClass('carousel_now');
}
else {
$('*.carousel_now').removeClass('carousel_now');
$('.if_paused').addClass('carousel_now');
}
}
$(document).ready(function() {
if ($('.if_started').hasClass('carousel_now')) {
$('.carousel').carousel({
interval: 7000
});
}
else {
$('.carousel').carousel({
interval: false
});
}
})
</script>
Hi according to docs you should be able to toggle carusel using those methods:
.carousel('cycle')
// to enable cycling
.carousel('pause')
// to stop cycling thru items
I think if you call .carusel() with options object it initilizes it again and may not work as you expect
You just have to read the docs from bootstrap, it's documented there.
Here's an example on how you would implement it.
function navAutoplay() {
const isAutoPlayEnabled = $('#toggle-auto-play').text() === 'Pause';
if (isAutoPlayEnabled) {
// Pause carousel if autoplay is enabled
$('#carouselExampleIndicators').carousel('pause');
$('#toggle-auto-play').text('Auto Play');
} else {
// Enable Auto Play if it's paused
$('#carouselExampleIndicators').carousel({
interval: 500, // Your choice of interval
});
$('#toggle-auto-play').text('Pause');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</head>
<body>
<div
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="1"
class=""
></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="2"
class=""
></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
class="d-block w-100"
data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide"
alt="First slide [800x400]"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_178a69a8120%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_178a69a8120%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9140625%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide"
alt="Second slide [800x400]"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_178a69a8120%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_178a69a8120%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide"
alt="Third slide [800x400]"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_178a69a8120%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_178a69a8120%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9921875%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
</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>
<!-- Toggle button -->
<div>
<button id="toggle-auto-play" class="btn btn-primary" onclick="navAutoplay()">Pause</button>
</div>
</body>
</html>
I've already tried .carousel('pause'); and .carousel('cycle'); to toggle the auto-playing, and it didn't work.
function navAutoplay() {
if ($('.if_paused').hasClass('carousel_now')) {
$('*.carousel_now').removeClass('carousel_now');
$('.if_started').addClass('carousel_now');
$('.carousel').carousel('cycle');
}
else {
$('*.carousel_now').removeClass('carousel_now');
$('.if_paused').addClass('carousel_now');
$('.carousel').carousel('pause');
}
}
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";
}
});