Carousel onmauseover

Webdesign Help
1

Hi friends. How to use ID for carousel onmauseover?

[image]

2

Hey,

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.

3

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.

[image]

gonderr
gonderr1920×1080 175 KB

4

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

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) 
     carousel.to(slide)
}
2 Likes
5

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

html

<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

javascript

(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 => {
			e.preventDefault()
			e.target.click()
		},true)

	});

})(document);
1 Like
6

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.

[image]

7

Adsız
Adsız1920×1080 295 KB

8

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

[image]