配置JQuery脚本以在Shopify上工作

我已经被困在这两天了，所以任何帮助都是感激的。我对这个也相当陌生

我试图在Shopify上安装JQuery代码，但它似乎不起作用。我已经将一些示例代码转换为Shopify脚本，但根本没有机会显示滑块

这是我放在标题中的内容：

{{ 'stylesheet.css' | asset_url | stylesheet_tag }}
{{ 'SliderPreview.css.css' | asset_url | stylesheet_tag }}
{{ 'royal-slider-1.0.min.css' | asset_url | stylesheet_tag }}
{{ 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' | script_tag }}
{{ 'jquery-1.5.1.min.js' | asset_url | script_tag }}
{{ 'jquery.easing.1.3.min.js' | asset_url | script_tag }}
{{ 'royal-slider-1.0.min.js' | asset_url | script_tag }} 

这就是我身体里的东西：

<script>    
        $(function() {  
            var defaultSlider = new RoyalSlider("#banner-rotator", {
                captionShowEffects:["moveleft", "fade"]             
            });
        });           
    </script>

    {{ page.content }}
    <script>       
    royalSlider.loadTheme('{{ 'royal-slider-1.0.min.js' | asset_url}}');        
        $('#banner-rotator').royalSlider({          
            imageAlignCenter:true,
            hideArrowOnLastSlide:true,
            slideshowEnabled: true,
            slideshowDelay:3000,
            slideshowPauseOnHover: true,
            slideshowAutoStart:true,
            slideTransitionSpeed:800,
            slideSpacing:0
        });     
    });
    </script>

$（函数（）{
var defaultSlider=新的RoyalSlider（#横幅旋转器）{
字幕显示效果：[“左移”、“淡入”]
});
});           
{{page.content}}
loadTheme（“{{”royal-slider-1.0.min.js“| asset_url}}”）；
$（“#横幅旋转器”）.royalSlider（{
imageAlignCenter：对，
HiderRowOnLastSlide：对，
幻灯片放映：对，
幻灯片放映延迟：3000，
slideshowPauseOnHover:true，
slideshowAutoStart:true，
滑块转换速度：800，
幻灯片位置：0
});     
});

然后，我将此标记放在我希望滑块显示的任何页面上：

<div id="banner-rotator">
<a href="/"><img src="{{ 'banner.jpg' | asset_url | img_tag }}" alt="{{ bridal `}}"`/></a>`
</div>

`

---

请帮忙

RiyalSlider现在升级到版本8。它可能更适合您：