【发布时间】:2017-05-16 08:05:41
【问题描述】:
虽然我找到了相同的question 4 years back 并没有得到我正在寻找的答案,但我是编码新手,我在谷歌的帮助下编写了这段代码,我的滑块在前端看起来不错,我可以拖动滑块用于下一张幻灯片,但不会自动滑动。
我的代码如下:
<div class="block_banner_top">
<div class="container">
<div class="row">
<div class="wrap_item">
<div class="item"><a href="#"> <img alt="" src="{{media url='home/slide01.jpg'}}" /> </a>
<div class="info"><a class="title" href="#">Rewards</a>
<p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
</div>
</div>
<div class="item"><a href="#"> <img alt="" src="{{media url='home/slide02.jpg'}}" /> </a>
<div class="info"><a class="title" href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
</div>
</div>
<div class="item"><a href="#"> <img alt="" src="{{media url='home/slide03.jpg'}}" /> </a>
<div class="info"><a class="title" href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
</div>
</div>
<div class="item"><a href="#"> <img alt="" src="{{media url='home/slide04.jpg'}}" /> </a>
<div class="info"><a class="title" href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor sit amet, te vis error saepe, integre.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($) {
$('.block_banner_top div.wrap_item').owlCarousel({
items: 1,
itemsCustom: [
[0, 1],
[480, 1],
[768, 1],
[992, 1],
[1200, 1]
],
pagination: true,
slideSpeed : 4000,
addClassActive: true,
scrollPerPage: true,
touchDrag: false,
});
});
// ]]></script>
【问题讨论】:
-
@SamuelJMathew:您对这个问题的编辑看起来像是重写,而且变化太大,所以我认为拒绝它是最安全的。较大的更改可能会意外地解决首先导致问题的解析错误。除非代码真的不可读,否则请不要重新格式化。
-
@halfer 我编辑了代码索引器以使其成为 mcve。我认为这将有助于他与其他人清楚地解释这个问题。此外,我只用他的代码更改了来自 lorempixel 的一些图像的代码。我用代码保留了错误。
-
@Samuel,我很感激你为什么这样做,我阅读了编辑信息。由于我已经提到的原因,我仍然认为编辑过于重要并且不是一个好习惯。如果您想向 OP 展示这一点,您可以将其放在粘贴板上并通过解释性链接将其添加到 cmets 中,或者提供同时提及您的改进的答案。
-
@halfer 感谢您的建议。下次我会考虑你的评论。
标签: jquery magento static slider block