ImageSlider jQuery plugin integration issues with Shopify platform

Other Questions Shopify
1

I’ve been working on this problem for several days and really need some guidance. I’m still learning web development so please bear with me.

I’m attempting to integrate an ImageSlider jQuery library 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 syntax 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-2.1.min.css' | asset_url | stylesheet_tag }}
{{ 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js' | script_tag }}
{{ 'jquery-2.1.4.min.js' | asset_url | script_tag }}
{{ 'jquery.transitions.1.2.min.js' | asset_url | script_tag }}
{{ 'image-slider-2.1.min.js' | asset_url | script_tag }}

My body scripts look like this:

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

{{ page.content }}
<script>
    imageSlider.initializeTheme('{{ 'image-slider-2.1.min.js' | asset_url}}');
    $('#photo-carousel').imageSlider({
        centerImages: true,
        disableNavOnEnd: true,
        autoplayEnabled: true,
        autoplayInterval: 4000,
        pauseOnMouseOver: true,
        autoStart: true,
        transitionDuration: 1000,
        imageGap: 0
    });
});
</script>

And I’m placing this markup where I want the slider:

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

Any suggestions would be greatly appreciated!