在Magento 2中，JQuery cycle2 next prev按钮无法滚动
在Magento 2中，JQuery cycle2 next prev按钮无法滚动
提问于 2019-01-12 21:51:24
我正在尝试使用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工具。
有没有人知道为什么这不起作用？
在此之前，非常感谢您。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-13 01:09:32
好了，我终于让它工作了。最后，我简单地使用脚本方法来初始化和配置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'
}
}
};我希望这对将来的某个人有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54160202
复制相关文章
相似问题
腾讯云开发者
