使用滑块在Shopify页面上运行

Question

---

我正在为朋友建立一个shopify网站，但无法让图片滑块正常运行。我最好的猜测是我以错误的顺序加载js和/或jquery文件，否则就会发现我无法解决的冲突。

该网站为http://t25cl.myshopify.com/，滑块为顶部的全屏图片。

我尝试使用此响应滑块：http://responsiveslides.com/

这是我的代码......在标题中：

{{ 'responsiveslides.css'         | asset_url | stylesheet_tag }}
{{ 'responsiveslides.min.js'     | asset_url | script_tag }}


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

滑块的

：

<div class="twelve columns">
<section>
<ul class="rslides" id="slider1">
<li><img src="{{ 'party-night-waith-dance.jpg' | asset_url }}" alt="{{ shop.name }}"></li>
<li><img src="{{ 'confetti_party-1320.jpg' | asset_url }}" alt="{{ shop.name }}"></li>
</ul>
</section>
</div>

在结束/身体标签之前：

<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
<script>
// You can also use "$(window).load(function() {"
$(function () {

// Slideshow 1
$("#slider1").responsiveSlides({
auto: true,
maxwidth: 800,
speed: 500
});
});
</script>

非常感谢任何建议。我把头发拉了出来。

谢谢！

Answer 1

您必须在滑块responsiveslides.min.js之前添加jquery。

Answer 2

我认为是因为你覆盖了jquery。

• 第一个请求jQuery已加载
• 第二次请求加载插件
• 第三个请求jQuery被旧版本覆盖（因此用$丢弃该插件）