Как менять слайды по наведению?

Question

[AlexGlinskiy]

Всем привет! Как можно реализовать подобный слайдер?

При наведении на часть слайдера она сама меняет слайд. Слайдер сделан на Owl
Сайт пример

Answer 1

[Максим]

Здесь автоматическое добавление областей для наведения

Comments

[Steppp]

Класс) А я то думал как они так делают в видеороликах )))

[Максим]

Steppp, на том сайте они сдвигают линию с изображениями - я поспешил дать ответ - но освобожусь - напишу такой вариант как на сайте

[Максим]

Steppp, вот добавил тот который надо

[AlexGlinskiy]

Максим Ленский, если таких слайдеров несколько на странице, то уже не работает

[Максим]

AlexGlinskiy, разумеется нет - просто перебрать их надо перебрать forEach

[AlexGlinskiy]

Максим Ленский, а можешь пример скинуть?

[Максим]

AlexGlinskiy, запросто -- чуть позже токо -

[Максим]

AlexGlinskiy, у меня чё то сервер с картинками отвалился

[AlexGlinskiy]

у меня тоже, видимо таких картинок теперь там нет)

[Максим]

AlexGlinskiy, чёр т его знает - я потом папку скину - она в дроббоксе будет - я щас занят

[AlexGlinskiy]

Голова вообще не шарит)) написал ерунду

<a href="/" class="wrap-slider">
						<div class="card__slider">
							<img src="https://serge-fashion.by/upload/resize_cache/iblock/865/450_450_0/1002_0__4507_65__black001_01.jpg" alt="">
							<img src="https://serge-fashion.by/upload/resize_cache/iblock/865/450_450_0/1002_0__4507_65__black001_01.jpg" alt="">
							<img src="https://serge-fashion.by/upload/resize_cache/iblock/865/450_450_0/1002_0__4507_65__black001_01.jpg" alt="">
						</div>
						<div class="card__bar"></div>
					</a>

$(".card__slider").each(function (index, element) {
        let images = $(this).children("img");
        let marker = "";

        for (let i = 0; i < images.length; i++) {
            let w = images[i].width * images.length;
            $(this).css("width", w+"px");
            marker += `<div class="item" data-pos="${images[i].width * i}"></div>`;
        }

        $(this).next(".card__bar").html(marker);

        console.dir($(this).next());
        $(this).next(".item").each(function (index, element) {
            $(this).onmousemove(function () {
                $(element).css("left", -el.dataset.pos+"px");
            });
        });
    });

[Максим]

AlexGlinskiy, не справишься сам ?

[AlexGlinskiy]

Максим Ленский, осталось события навесить. Что-то типа этого, но не работает))

$(this).next(".card__bar").children(".item").each(function (index, el) {
            $(this).mousemove(function(){
                $(this).css("left", -el.dataset.pos+"px");
            });
        });

[AlexGlinskiy]

Максим Ленский, Спасибо!

$(".card__slider").each(function (index, element) {
        let images = $(this).children("img");
        let marker = "";

        for (let i = 0; i < images.length; i++) {
            let w = images[i].width * images.length;
            $(this).css("width", w+"px");
            marker += `<div class="item" data-pos="${images[i].width * i}"></div>`;
        }

        $(this).next(".card__bar").html(marker);

        //console.log($(this).next(".card__bar").children(".item"));

        $(this).next(".card__bar").children(".item").each(function (index, el) {
            
            $(this).mousemove(function(){
                $(this).parent().prev().css("left", -$(this).attr('data-pos')+"px");
            });
        });
    });