配置 RoyalSlider JQuery 脚本以在 Shopify 上工作答案

【问题标题】：configuring RoyalSlider JQuery script to work on Shopify配置 RoyalSlider JQuery 脚本以在 Shopify 上工作
【发布时间】：2012-04-25 18:50:12
【问题描述】：

我已经坚持了 2 天了，因此感谢您的帮助。我对此也很陌生。

我正在尝试在 Shopify 上安装 RoyalSlider 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>

然后我把这个标签放在我想要显示滑块的任何页面上：

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

请帮忙！

【问题讨论】：

标签： jquery image gallery shopify

【解决方案1】：

RiyalSlider 现在升级到版本 8。它可能更适合您：http://codecanyon.net/item/royalslider-touchenabled-jquery-image-gallery/461126

【讨论】：