@mrsexy
Senior Pomidor

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

Вот разметка 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 атрибут.
  • Вопрос задан
  • 74 просмотра
Пригласить эксперта
Ответы на вопрос 2
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Выполняйте поиск элементов не по всей странице а в пределах контейнера конкретного слайдера.
Ответ написан
@Vladneim
Начинающий верстальщик
переделайте функцию так, должно помочь
$(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");
        }
    }); 
});


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
22 янв. 2021, в 19:26
40000 руб./за проект
22 янв. 2021, в 19:14
25000 руб./за проект