Getting ImageSlider jQuery plugin to function properly in Shopify theme

Other Questions Shopify
1

I’ve been working on this issue for several days and could really use some guidance since I’m still learning web development.

I’m attempting to integrate an ImageSlider jQuery plugin into my Shopify store but can’t get it to display properly. I’ve tried adapting the documentation examples to work with Shopify’s liquid templating but the carousel isn’t appearing on my pages.

Here’s my header configuration:

{{ 'main-styles.css' | asset_url | stylesheet_tag }}
{{ 'carousel-theme.css' | asset_url | stylesheet_tag }}
{{ 'image-slider-v2.min.css' | asset_url | stylesheet_tag }}
{{ 'https://code.jquery.com/jquery-1.6.4.min.js' | script_tag }}
{{ 'jquery-2.1.1.min.js' | asset_url | script_tag }}
{{ 'jquery.transitions.1.2.min.js' | asset_url | script_tag }}
{{ 'image-slider-v2.min.js' | asset_url | script_tag }}

My page template includes this JavaScript:

<script>
    $(document).ready(function() {
        var mainCarousel = new ImageSlider("#photo-carousel", {
            animationEffects: ["slideright", "fadeIn"]
        });
    });
</script>

{{ page.content }}
<script>
    imageSlider.initializeTheme('{{ 'image-slider-v2.min.js' | asset_url }}');
    $('#photo-carousel').imageSlider({
        centerImages: true,
        disableNavOnEnd: true,
        autoPlay: true,
        autoPlayInterval: 4000,
        pauseOnMouseOver: true,
        startAutoPlay: true,
        transitionDuration: 600,
        imageGap: 0
    });
</script>

The HTML markup I’m using:

<div id="photo-carousel">
    <a href="/collections/featured">
        <img src="{{ 'hero-image.jpg' | asset_url }}" alt="{{ collection.title }}" />
    </a>
</div>

Any suggestions would be greatly appreciated!

2

I’ve dealt with this same issue when adding jQuery plugins to Shopify. Your DOM structure is the main problem - ImageSlider needs multiple images in the #photo-carousel to work properly, not just one. Try wrapping your initialization in a theme-ready event since Shopify’s AJAX can mess with normal jQuery loading. Move your script tags to the bottom of your page template too - mixing them with content causes problems. Also check if your CSS files are loading right in the browser inspector. Some carousel plugins don’t play nice with Shopify’s lazy loading and need tweaking.

3

Your code has a few issues causing this problem. You’re loading jQuery twice with different versions - that creates conflicts. Pick either the CDN or local copy, not both. You’re also initializing the slider twice (new ImageSlider and $(‘#photo-carousel’).imageSlider), which definitely breaks things. I ran into the same issues when I started with Shopify themes. Liquid templating gets weird with jQuery plugins. Remove one jQuery library and use just one initialization method. Also check if your CSS is actually loading - open dev tools and check the network tab. Shopify asset paths can be a pain if files aren’t uploaded to the assets folder correctly. One more thing - your HTML structure needs to match what ImageSlider expects. Most carousel plugins need multiple images or specific wrapper elements, but you’ve only got one image in your markup.