Как остановить добавление класса к элементу, если другие элементы имеют этот класс?

Question

У меня есть ползунок, который работает по таймеру с кнопками влево и вправо, которые также перемещают ползунок.

Слайдер работает с помощью JQuery для добавления «активного» класса к каждому элементу «li», который, в свою очередь, добавляет правильный CSS и анимацию.

Проблема:

Когда sider находится в анимации, и вы нажимаете одну из кнопок или нажимаете кнопки несколько раз, это удваивает функцию JQuery, добавляя класс 'active' к более чем одному элементу 'li', чтобы появилось два или более изображений и испортил ползунок.

Решение:

Я хочу поместить оператор if, который говорит, что, пока никакие другие элементы 'li' не имеют класса 'active', запустите функцию, иначе остановите.Как вы можете видеть, я пытаюсь использовать "if ($ (" li: not (.active) ")) {", но это не работает.Любая помощь с благодарностью.

Вот мой HTML (Twig):

    {% block stylesheets %}
<link rel="stylesheet" href="/theme/rbli-2017/css/carousel.css">
{% endblock stylesheets %}
{% setcontent slider = 'sliders/testslider' %}



<div id="slider">

    <div class="control_prev">
        <button class="prev_arrow">&lt;</button>
    </div>

    <ul class="slider-ul">
        {% for slide in slider.feature %}

        <div class="slide">

        <li style="background-image: url({{slide.repeatimage|image}}); background-repeat: no-repeat;"
            class="slider-li">
        </li>

        <div class="text-block">

        <a href="{{slide.repeatimageLink}}" class="slider-link"> {{ slide.repeatimagetitle }} </a>

        </div>

        </div>
        {% endfor %}
    </ul>
 <div class="control_next">
    <button class="next_arrow">&gt;</button>
    </div>

</div>



{% block my_javascripts %}

<script src="{{ paths.theme }}/js/carousel.js" type="text/javascript"></script>

{% endblock %}

Вот мой JS (JQuery):

$(document).ready(function () {
    $('.slide').first().addClass('active');
    $('.active').css({"display": "block"});
 setInterval(function () {

            moveRight();

        }, 4000);


});


function moveRight() {
    console.log('moveRight()');


    var currentSlide = $('.active');
    var nextSlide = currentSlide.next('.slide');





    function fadeOutOne() {
        console.log('fadeOutOne()');
        $('.slider-ul').removeAttr("style");
        $('.next_arrow').removeAttr("style");

        if($("li:not(.active)")){
            $('.slide').first().fadeIn(300).delay('slow').addClass('active');
        }


    };

    function fadeOutTwo() {
        console.log('fadeOutTwo()');
        $('.slider-ul').removeAttr("style");
        $('.next_arrow').removeAttr("style");

        if($("li:not(.active)")){
        nextSlide.fadeIn(300).delay('slow').addClass('active');
        }
    };


   if (nextSlide.length == 0) {


        $('.slider-ul').animate({
            marginLeft: '100px'
        }, {
            duration: 200,
            queue: false
        });
        $('.slider-ul').animate({
            marginRight: '-100px'
        }, {
            duration: 200,
            queue: false
        });
        currentSlide.fadeOut(300).removeClass('active');
        setTimeout(fadeOutOne, 500);


    } else {



        $('.slider-ul').animate({
            marginLeft: '100px'
        }, {
            duration: 200,
            queue: false
        });
        $('.slider-ul').animate({
            marginRight: '-100px'
        }, {
            duration: 200,
            queue: false
        });
        currentSlide.fadeOut(300).removeClass('active');
        setTimeout(fadeOutTwo, 500);


    }


};

function moveLeft() {
    console.log('moveLeft()');
    var currentSlide = $('.active');
    var prevSlide = currentSlide.prev('.slide');



    function fadeOutOne() {
        console.log('fadeOutOne()');
        $('.slider-ul').removeAttr("style");
        $('.prev_arrow').removeAttr("style");

        $('.slide').last().fadeIn(300).delay('slow').addClass('active');
    };

    function fadeOutTwo() {
        console.log('fadeOutTwo()');
        $('.slider-ul').removeAttr("style");
        $('.prev_arrow').removeAttr("style");

        prevSlide.fadeIn(300).delay('slow').addClass('active');
    };



    if (prevSlide.length == 0) {
        $('.slider-ul').animate({
            marginLeft: '-100px'
        }, {
            duration: 200,
            queue: false
        });
        $('.slider-ul').animate({
            marginRight: '100px'
        }, {
            duration: 200,
            queue: false
        });
        currentSlide.fadeOut(300).removeClass('active');
        setTimeout(fadeOutOne, 500);


    } else {
        $('.slider-ul').animate({
            marginLeft: '-100px'
        }, {
            duration: 200,
            queue: false
        });
        $('.slider-ul').animate({
            marginRight: '100px'
        }, {
            duration: 200,
            queue: false
        });
        currentSlide.fadeOut(300).removeClass('active');
        setTimeout(fadeOutTwo, 500);


    }
};

$('.next_arrow').click(function () {


    moveRight();



});


$('.prev_arrow').click(function () {

    function enableLeft(){
        $('.prev_arrow').prop('disabled',false);
    }

    $('.prev_arrow').prop("disabled",true);
    moveLeft();

    setTimeout(enableLeft, 300);
});

Answer 1

if(!$('div.slide').hasClass('active')) { 
    $('div.slide:first').fadeIn(300).delay('slow').addClass('active');
}