0

У меня на странице много минислайдеров с элементами с одним классом next и prev, как мне сделать, чтобы учитывался клик внутри конкретного слайдера?

var slides = $(".slider .slides").children(".slide");                                                   // Получаем массив всех слайдов
var width = slides.width()+12;      
                                                                                                        // Получаем ширину видимой области
var i = slides.length;                                                                                  // Получаем количество слайдов
var offset = i * width;                                                                                 // Задаем начальное смещение и ширину всех слайдов

$(".slider .slides").css('width',offset);                                                               // Задаем блоку со слайдами ширину всех слайдов

offset = 0;                                                                                             // Обнуляем смещение, так как показывается начала 1 слайд
$(".slider .next").click(function(){
var j=$(this).parent().find('.slides').children(".slide").length - 2;                                                           // Событие клика на кнопку "следующий слайд"
    if (offset < width * j) {                                                                           // Проверяем, дошли ли мы до конца
        offset += width;                                                                                // Увеличиваем смещение до следующего слайда
        $(this).parent().find(".slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)");       // Смещаем блок со слайдами к следующему
    }
});


$(".slider .prev").click(function(){                                                                    // Событие клика на кнопку "предыдущий слайд"
    if (offset > 0) {                                                                                   // Проверяем, дошли ли мы до конца
        offset -= width;                                                                                // Уменьшаем смещение до предыдущего слайда
        $(this).parent().find(".slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)");       // Смещаем блок со слайдами к предыдущему
    }
});

2 ответа 2

0

Мне кажется, что для каждого Вашего слайдера нужно установить так званый Listener

Slider.addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

Но это не точно.

0

Спасибо за быстрый отклик! Разобрался.

$(".slider").each(function(){
        var slides = $(this).children(".slides").children(".slide");                                                    // Получаем массив всех слайдов
        var width = slides.width()+12;      
                                                                                                                // Получаем ширину видимой области
        var i = slides.length;                                                                                  // Получаем количество слайдов
        var offset = i * width;                                                                                 // Задаем начальное смещение и ширину всех слайдов

        $(".slides").css('width',offset);                                                               // Задаем блоку со слайдами ширину всех слайдов

        offset = 0;                                                                                             // Обнуляем смещение, так как показывается начала 1 слайд
        $(this).children(".next").click(function(){
        var j=$(this).parent().find('.slides').children(".slide").length - 2;                                                           // Событие клика на кнопку "следующий слайд"
            if (offset < width * j) {                                                                           // Проверяем, дошли ли мы до конца
                offset += width;                                                                                // Увеличиваем смещение до следующего слайда
                $(this).parent().find(".slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)");       // Смещаем блок со слайдами к следующему
            }
        });


        $(this).children(".prev").click(function(){                                                                 // Событие клика на кнопку "предыдущий слайд"
            if (offset > 0) {                                                                                   // Проверяем, дошли ли мы до конца
                offset -= width;                                                                                // Уменьшаем смещение до предыдущего слайда
                $(this).parent().find(".slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)");       // Смещаем блок со слайдами к предыдущему
            }
        });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.