Question

我试图在Magento 2.3.0中使用JQuery Cycle 2，但无法使prev和next按钮起作用。我的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下一个上一个按钮在Magento 2中不滚动

1 个答案: