Carousel onmauseover

Hi friends. How to use ID for carousel onmauseover?



For some reason the image you’ve meant to attached is missing and it’s not very clear from the question what you’re trying to achieve.

I defined my button list as carousel indicators. However, I want the buttons to be directed to the corresponding slide element when the mouse is hovered. I hope there is no shortage.


On each of your buttons add: onmouseover gotoSlide(this)

then add the following javascript:

function gotoSlide(e) {
     let slide=e.getAttribute("data-bs-slide-to");
     let cara=e.getAttribute("data-bs-target");
     var myCarousel = document.querySelector(cara)
     var carousel = bootstrap.Carousel.getInstance(myCarousel)


If you add a list without any list-items below the carousel
like this


<ul class="list-unstyled d-flex justify-content-center mt-3" id="buttons"></ul>

add this to a javascript file then your buttons will be automatically generated so no need
to edit the list of buttons if you add or delete slides to the carousel


(function(document) {
	"use strict";
	const ready = (callback) => {
		if (document.readyState != "loading") callback();
		else document.addEventListener("DOMContentLoaded", callback);
	ready(() => {
		// selectors
		const $ = (el, all = false) => {
			el = el.trim();
			if (all) return [...document.querySelectorAll(el)];
			else return document.querySelector(el);

		// EventListeners
		const on = (type, el, listener, all = false) => {
			let selectEl = $(el, all);
			if (selectEl) {
				if (all) selectEl.forEach(e => e.addEventListener(type, listener));
				else selectEl.addEventListener(type, listener);

		const buttons = $('#buttons');
		const indicators = $('.carousel-item',true)
		indicators.forEach((indicator,index) => {
			buttons.innerHTML +=`<li> <button class="btn btn-secondary btn-small mx-1 carouselbtn" data-bs-target='#carousel-1' data-bs-slide-to=${index}>${index + 1}</button></li>`;

		on('mouseenter','.carouselbtn', e => {


1 Like

Thank you both very much for your help. You helped me solve my problems. However, when opening the page, I cannot bring the button 1 of the carousel active. but the active item in the carousek next and prev navigation does not come with a color change (active) like the css I specified. I look forward to your help if you have time.


I need your help! I can’t enable button 1 for the first item. So the buttons are not active/inactive while scrolling.