Как переписать функцию Jquery для нескольких слайдеров?

Question

[Alfieros]

Вот разметка html

<div id="fadebox">
                        <svg version="1.1" id="left_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
                            <g>
                                <path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
                                    c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/>
                            </g>
                        </svg>
                        <svg version="1.1" id="right_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
                            <g>
                                <path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
                                    c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z
                                    "/>
                            </g>
                        </svg>
                        <div id="fade">
                            <img class='slide active' src="/img/elka1.jpg" alt="">
                            <img class='slide' src="/img/elka1.jpg" alt="">
                            <img class='slide' src="/img/elka1.jpg" alt="">
                            <img class='slide' src="/img/elka1.jpg" alt="">
                            <img class='slide' src="/img/elka1.jpg" alt="">
                        </div>
                    </div>

Вот ф-ция:

$(document).ready(function(){
    $('#right_arrow', this).click(function(){ 
        var nextSlide = $('.slide.active').next();
        if($(".slide.active").is(".slide:last")) {
            $('.slide.active').removeClass("active");
            $('.slide:first').addClass("active");
        }
        else {
            $('.slide.active').removeClass("active");
            $(nextSlide).addClass("active");
        }
    });
    $("#left_arrow").click(function(){
        var prevSlide = $('.slide.active').prev();
        if($(".slide.active").is($(".slide:first"))) {
            $('.slide.active').removeClass("active");
            $('.slide:last').addClass("active");
        }
        else {
            $('.slide.active').removeClass("active");
            $(prevSlide).addClass("active");
        }
    }); 
});

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

P.S - Скорее всего через форыч глобально, добавляя к каждой карточке со слайдером data атрибут.

Comments

[iBird Rose]

перепиши так, чтобы все элементы внутри функции click находились через $(this)

[Alfieros]

iBird Rose, к сожалению делал, не вышло. Возможно неправильно записывал условие, но консоль ошибок не выдавала, а слайдер вёл себя некорректно.

Answer 1

[Alex]

Выполняйте поиск элементов не по всей странице а в пределах контейнера конкретного слайдера.

Answer 2

[Владимир Майструк]

переделайте функцию так, должно помочь

$(document).ready(function(){
    $('#one-block>#right_arrow').click(function(){ 
        var nextSlide = $('.slide.active').next();
        if($(".slide.active").is(".slide:last")) {
            $('.slide.active').removeClass("active");
            $('.slide:first').addClass("active");
        }
        else {
            $('.slide.active').removeClass("active");
            $(nextSlide).addClass("active");
        }
    });
    $("#left_arrow").click(function(){
        var prevSlide = $('.slide.active').prev();
        if($(".slide.active").is($(".slide:first"))) {
            $('.slide.active').removeClass("active");
            $('.slide:last').addClass("active");
        }
        else {
            $('.slide.active').removeClass("active");
            $(prevSlide).addClass("active");
        }
    }); 
});

и так с каждым, то есть перекопировать ее, а вообще лучше всё-таки встроить готовый слайдер, они делались многие годы и делаются прямо сейчас, так что в них нет таких "ляпов"

Comments

[Alfieros]

Данное решение локально для одного блока непосредственно. Изначально думал о таком решении, но тогда получается слишком тяжелый JS файл, если таких слайдеров мне нужно штук 30 к примеру.

[Владимир Майструк]

Alfieros, тогда предлагаю способ который может не работать,

$(document).ready(function(){
    $('#right_arrow').click(function(){ 
        var nextSlide = $('.slide.active').next();
        if($(".slide.active, this").is(".slide:last")) {
            $('.slide.active, this').removeClass("active");
            $('.slide:first, this').addClass("active");
        }
        else {
            $('.slide.active, this').removeClass("active");
            $(nextSlide).addClass("active");
        }
    });
    $("#left_arrow").click(function(){
        var prevSlide = $('.slide.active').prev();
        if($(".slide.active, this").is($(".slide:first"))) {
            $('.slide.active, this').removeClass("active");
            $('.slide:last, this').addClass("active");
        }
        else {
            $('.slide.active', thisм).removeClass("active");
            $(prevSlide).addClass("active");
        }
    }); 
});

[Владимир Майструк]

Владимир Майструк, Я случайно , this добавил внутрь скобок их надо снаружи

[Alfieros]

Владимир Майструк, по логике правильно внутри, но, так это всё равно не работает. Ни снаружи, ни внутри.
Я уже и костыль писал с помощью JS, перебирая через querySelectorAll все элементы по клику.