JQuery cycle2 next prev buttons not scrolling in Magento 2

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.

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.