Кнопки JQuery cycle2 next prev не прокручиваются в Magento 2

Question

Я пытаюсь использовать JQuery Cycle 2 в Magento 2.3.0, но не могу заставить работать кнопки "предыдущий" и "следующий". Мой HTML это:

<div class="slideshow-container siegehouse">
    <a id="sh-prev" class="browse prev sh-prev"></a>
    <div class="cycle-slideshow"
         data-cycle-fx="scrollHorz" 
         data-cycle-timeout="0"
         data-cycle-slides="> div"
         data-cycle-prev="#sh-prev"
         data-cycle-next="#sh-next">
        <div>
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_01.jpg"}}" alt="The Siege House Restaurant" rel="#sh1" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_02.jpg"}}" alt="The Siege House Restaurant" rel="#sh2" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_03.jpg"}}" alt="The Siege House Restaurant" rel="#sh3" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_04.jpg"}}" alt="The Siege House Restaurant" rel="#sh4" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_05.jpg"}}" alt="The Siege House Restaurant" rel="#sh5" />
        </div>
        <div>
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_06.jpg"}}" alt="The Siege House Restaurant" rel="#sh6" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_07.jpg"}}" alt="The Siege House Restaurant" rel="#sh7" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_08.jpg"}}" alt="The Siege House Restaurant" rel="#sh8" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_09.jpg"}}" alt="The Siege House Restaurant" rel="#sh9" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_10.jpg"}}" alt="The Siege House Restaurant" rel="#sh10" />
        </div>
    </div>
    <a id="sh-next" class="browse next sh-next"></a>
</div>

Я создал скрипку с моим кодом, и она отлично работает, просто не работает в Magento. Может быть, есть какой-то конфликт.

Моя страница Magento - https://www.artofwood.co.uk/signature-range.html. Рассматриваемый цикл находится под заголовком Siege House, другой использует JQuery Tools.

Кто-нибудь знает, почему это не работает?

Спасибо заранее.

Answer 1

Хорошо, так что я наконец-то заработал. В конце я просто использовал метод сценария для инициализации и настройки cycle2.

Вот мой HTML:

<div class="slideshow-container siegehouse">
    <a class="browse prev sh-prev"></a>
    <div class="siegehouse-slideshow slideshow">
        <div>
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_01.jpg"}}" alt="The Siege House Restaurant" rel="#sh1" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_02.jpg"}}" alt="The Siege House Restaurant" rel="#sh2" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_03.jpg"}}" alt="The Siege House Restaurant" rel="#sh3" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_04.jpg"}}" alt="The Siege House Restaurant" rel="#sh4" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_05.jpg"}}" alt="The Siege House Restaurant" rel="#sh5" />
        </div>
        <div>
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_06.jpg"}}" alt="The Siege House Restaurant" rel="#sh6" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_07.jpg"}}" alt="The Siege House Restaurant" rel="#sh7" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_08.jpg"}}" alt="The Siege House Restaurant" rel="#sh8" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_09.jpg"}}" alt="The Siege House Restaurant" rel="#sh9" />
            <img src="{{media url="wysiwyg/ArtOfWood/SiegeHouseCochester/siege_house_colchester_10.jpg"}}" alt="The Siege House Restaurant" rel="#sh10" />
        </div>
    </div>
    <a class="browse next sh-next"></a>
</div>

И мой сценарий, учитывая это, использует Magento 2:

<script type="text/x-magento-init">
    {
    "*": {
    "cycle2": {}
    }
    }
</script>
<script type="text/javascript">
    require(['jquery', 'cycle2', 'domReady!'], function ($) {
        $('.siegehouse-slideshow').cycle({
            fx: "scrollHorz",
            timeout: 0,
            slides: "> div",
            prev: ".sh-prev",
            next: ".sh-next",
            allowWrap: false
        });
    });
</script>

И, наконец, мой requirejs.config.js:

var config = {
        paths: {
            'cycle2': "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min"
        },
        "shim": {
          'cycle2': {
              deps: ["jquery"],
              exports: 'cycle2'
          }
        }
};

Я надеюсь, что это поможет кому-то в будущем.