Изменить направление выделения на свитке без изменения его текущего положения

Question

Я использую плагин marquee.js jQuery для рендеринга списка в текстовом скроллере, но я пытаюсь изменить направление прокручиваемого текста при нажатии кнопок без изменения текущей позиции текста.

Вот что я пробовал:

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

Вы устанавливаете переменную direction в обработчиках событий click, но не вызываете никакого кода для обновления конфигурации $('.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>