【发布时间】:2015-03-14 11:47:49
【问题描述】:
我在 Magento 网站上使用 Owl Carousel,我可以正确显示幻灯片,但无法使用它的任何功能控制滑块...这是我的 html 代码:
<div id="main-slider" class="owl-carousel mobile-slider">
<div class="item">{{block type="cms/block" block_id="block_slide1"}}</div>
<div class="item">{{block type="cms/block" block_id="block_slide2"}}</div>
<div class="item">{{block type="cms/block" block_id="block_slide3"}}</div>
<div class="item">{{block type="cms/block" block_id="block_slide4"}}</div>
<div class="item">{{block type="cms/block" block_id="block_slide5"}}</div>
</div>
这是我直接放置在上述 html 之后的控件:
jQuery(document).ready(function(){
jQuery('#main-slider').owlCarousel({
singleItem: true,
slideSpeed: 200,
stopOnHover: true,
navigation: true
});
});
这是我返回的控制台错误:
在我的标题中我有:
<link rel="stylesheet" type="text/css" href="js/nwdthemes/owl-carousel/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="js/nwdthemes/owl-carousel/owl.theme.css" />
<link rel="stylesheet" type="text/css" href="js/nwdthemes/owl-carousel/owl.transitions.css" />
<script type="text/javascript" src="js/nwdthemes/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/nwdthemes/owl-carousel/owl.carousel.min.js"></script>
这是轮播的输出,'singleItem: true' 似乎不起作用,因为它一次显示 2 张幻灯片:
【问题讨论】:
-
对我来说这意味着
owlCarousel是未定义的。您对定义 owlCarousel 插件的脚本的引用在哪里? -
刚刚编辑了我在标题中包含的脚本
-
为什么控制台输出中的代码与直接在 html 之后的代码不同?您是否没有在 html 之后发布所有代码,或者这是一个不同的位置?
-
控制台错误的屏幕截图比我将代码复制并粘贴到这里的问题中有点旧,我想要工作的主要事情是 'singleItem: true' ,如现在,如果您查看轮播,它会在较大的设备/桌面上同时显示多张幻灯片,而不是一次只显示 1 张
-
我会补充一点,无论控件设置为什么,我都会得到相同的“Uncaught TypeError”,并且没有任何控件设置反映在轮播的输出上。
标签: javascript jquery magento magento-1.8 owl-carousel