jQuery cycle2下一个上一个按钮在Magento 2中不滚动

Question

I am trying to use JQuery Cycle 2 in Magento 2.3.0 but I can't get the prev and next buttons to work. My html is:

<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>

I have created a fiddle with my code and it works fine, just not working in Magento. Maybe there is some conflict.

My Magento page is https://www.artofwood.co.uk/signature-range.html . The cycle in question is under the Siege House heading, the other one is using JQuery Tools.

Does anyone know why this is not working?

Many thanks in advance.

Answer 1

Ok so I finally got it working. In the end I simply used the script method to initialize and configure cycle2.

Here's my 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>

And my script, bearing in mind this is using 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>

And finally my 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'
          }
        }
};

I hope this helps someone in the future.