私はこれで2日間立ち往生しているので、助けていただければ幸いです。私もこれにかなり慣れていません。
RoyalSlider JQuery コードを Shopify にインストールしようとしていますが、機能していないようです。サンプル コードの一部を 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>
助けてください！