JQuery cycle2 next prev 按钮在 Magento 2 中不滚动

Question

我正在尝试在 Magento 2.3.0 中使用 JQuery Cycle 2，但我无法使用上一个和下一个按钮。我的 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>

我用我的代码创建了一个 fiddle，它工作正常，只是在 Magento 中不工作。可能有些冲突。

我的 Magento 页面是 https://www.artofwood.co.uk/signature-range.html。有问题的周期在攻城楼标题下，另一个正在使用 JQuery 工具。

有谁知道为什么这不起作用？

非常感谢。

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'
          }
        }
};

我希望这对以后的人有所帮助。

JQuery cycle2 next prev 按钮在 Magento 2 中不滚动

JQuery cycle2 next prev buttons not scrolling in Magento 2

jquery

jquery-cycle2

magento2