RoyalSlider jQuery plugin integration issues with Shopify theme

Other Questions Shopify
1

Hey everyone, I need some help with a jQuery slider problem.

I’ve been trying to get RoyalSlider working on my Shopify store for the past couple days but can’t figure out what’s wrong. The slider just won’t display at all.

Here’s my header setup:

{{ 'main-styles.css' | asset_url | stylesheet_tag }}
{{ 'slider-theme.css' | asset_url | stylesheet_tag }}
{{ 'royal-slider.min.css' | asset_url | stylesheet_tag }}
{{ 'jquery-2.1.4.min.js' | asset_url | script_tag }}
{{ 'jquery.easing.min.js' | asset_url | script_tag }}
{{ 'royal-slider.min.js' | asset_url | script_tag }}

My body code looks like this:

<script>
$(document).ready(function() {
    var heroSlider = new RoyalSlider("#image-carousel", {
        captionShowEffects: ["moveright", "fadeIn"]
    });
});

$('#image-carousel').royalSlider({
    imageAlignCenter: false,
    hideArrowOnLastSlide: false,
    slideshowEnabled: true,
    slideshowDelay: 4000,
    slideshowPauseOnHover: true,
    slideshowAutoStart: true,
    slideTransitionSpeed: 600,
    slideSpacing: 2
});
</script>

And the HTML where I want it to appear:

<div id="image-carousel">
<a href="/collections/all"><img src="{{ 'hero-image.png' | asset_url }}" alt="Featured products"/></a>
</div>

Any ideas what might be causing this? I’m pretty new to jQuery integration.

2

You’re mixing two different ways to initialize the slider - new RoyalSlider() and $('#image-carousel').royalSlider() on the same element. That’ll cause problems. Stick with the jQuery method since it’s simpler and works better. Check your browser console for JavaScript errors too. Shopify themes sometimes have jQuery version conflicts that break things. Use the Network tab in dev tools to make sure your RoyalSlider files are actually loading. Also, your slider container needs defined CSS dimensions - if there’s no height or width set, the slider won’t show up at all.

3

u might be initializing it twice, which can mess stuff up. try sticking to one method of init. also, dont forget to verify that your css and js files are loading properly, since shopify’s asset pipeline can get kinda weird sometimes.