Как сделать слайдер при наведении?

Question

[arsenalfangun]

Как реализовать такой слайдер? При наведении на определенную часть меняется картинка и меняется положение линии. Гуглю и везде обычные слайдеры. Дайте пожалуйста наводки, как называется такой тип слайдера и что вообще гуглить.

Comments

[Maxim Kirshin]

тебе и нужен обычный слайдер, просто слегка кастомизировать

https://stackoverflow.com/questions/47238245/stop-...

Answer 1

[Антон]

Это даже не слайдер.

Поверх картинки накладываются N блоков в ряд, где N = кол-ву изображений.
Соответственно, у каждого N блока в data атрибуте есть путь к своему изображению.
По наведению на этот блок, берем адрес изображения из data и подставляем в основной блок с изображением.

Всё

Comments

[Pashok Doom]

А при уводе мыши с карточки - переброс на первую картинку, по классике

Answer 2

[Lord_Dantes]

Можно использовать Owl Carousel 2, правда он не поддерживает больше но тем не менее. Там есть события и при наведении например, можно сделать событие перелистывания или автоперелистывания.

Answer 3

[Маргарита Красовская]

function catalogItemSlider() {
	const itemSwiper = new Swiper('.catalog-item-swiper', {
		speed: 700,
		slidesToShow: 1,
		slidesToScroll: 1,
		scrollbar: {
			el: '.swiper-scrollbar',
			draggable: false,
		},
		loop: false
	});

	// определение общего сквозного индекса итема, чтобы переключать слайдер только в нем
	$('.product-item-image-wrapper-sectors > div').mouseenter(function (e) {
		let sectorIndex = $(this).index(),
			rowIndex = $(this).closest('.catalog__row').index(),
			currentRow = $('.catalog__row')[rowIndex],
			catalogItemIndex = $(this).closest('.catalog__item').index() + 1,
			totalRowItems = ((rowIndex + 1) * 3),
			currentItemIndex = (catalogItemIndex + totalRowItems - 3) - 1;

		itemSwiper[currentItemIndex].slideTo(sectorIndex, 700);
	});

	// возвращение всех слайдеров в исходную точку при выходе из итема
	$('.catalog__item').mouseleave(function () {
		$('.catalog-item-swiper').each(function (index, el) {
			let slider = el.swiper; // Get the swiper instance
			if (slider) {
				slider.slideTo(0, 700); // Slide to the first slide with a duration of 700ms
			}
		});
	});
}