Change marquee direction on scroll without changing its current position

Question

I am using the marquee.js jQuery plugin to render a list in a text scroller, but what I'm trying to do is change the direction of the scrolling text when clicking the buttons without changing the current position of the text.

Here is what I have tried:

 var direction = 'left'; $('.right-scroll').on('click', function() { direction = 'right' }) $('.left-scroll').on('click', function() { direction = 'left' }) $(function() { $('.scrollermarquee').marquee({ duration: 15000, direction: direction }); });

 .scrollermarquee { overflow: hidden; border: 1px solid #ccc; background: black; color: rgb(202, 255, 195); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script> <button class="left-scroll">Left scroll</button> <button class="right-scroll">Right scroll</button> <div class="scrollermarquee"> <ul> <li> <div class="views-field views-field-title"> <span class="field-content"> <a href="/node/805" hreflang="en">test1</a> </span> </div> </li> <li> <div class="views-field views-field-title"> <span class="field-content"> <a href="/node/801" hreflang="en">test2</a> </span> </div> </li> <li> <div class="views-field views-field-title"> <span class="field-content"> <a href="/node/470" hreflang="en">test3</a> </span> </div> </li> </ul> </div>

Answer 1

You are setting the direction variable in the click event handlers but not calling any code to update the configuration of $('.scrollermarquee') .

<script>

    // set marquee to scroll in supplied direction
    var setMarquee = function(direction) {
       $('.scrollermarquee').marquee({
            duration: 15000,
            direction: direction
        });
    };

    $('.right-scroll').on('click',function(){
        setMarquee('right'); // change marquee direction to right
    })

    $('.left-scroll').on('click',function(){
        setMarquee('left'); // change marquee direction to left
    })

    $(function () {
        setMarquee('left'); // start marquee when page loads
    });

</script>