Btukfyl

I have a slider that runs on a timer with buttons left and right that also move the slider.

The slider works by using JQuery to add an 'active' class to each 'li' element which in turn adds the correct CSS and animation.

The Problem:

When the sider is in animation and you click one of the buttons or you click the buttons repeatedly it doubles up the JQuery function adding class 'active' to more than one 'li' element so two or more images appear and mucks up the slider.

The Solution:

I want to put an if statement that says as long as no other 'li' elements have the 'active' class then run the function otherwise stop. As you can see I'm trying to use "if($("li:not(.active)")){" but this is not working. Any help greatly appreciated.

Here is my 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 %}

Here is my 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);

});

if(!$('div.slide').hasClass('active')) { 

    $('div.slide:first').fadeIn(300).delay('slow').addClass('active');

}