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)

1 Like

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