Alan Alan - 2 months ago 23
CSS Question

Owl Carousel: Javascript won't load. Shopify Issue or Code Issue?

Trying to get my owl carousel to work for me in shopify. Could you take a look at my code and see if anything looks off to you?

I think I've implemented it the to T but it won't seem to fire. Any suggestions would be great!

CSS Styles

{{ 'owl.theme.css' | asset_url | stylesheet_tag }}
{{ 'owl.carousel.css' | asset_url | stylesheet_tag }}


JS Files

{{ 'owl.carousel.js' | asset_url | script_tag }}
{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}


Slider HTML

{% if collection.handle contains "tee" %}

<script>
$(document).ready(function() {

$("#heroSlider").owlCarousel({

navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true

// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
});
</script>

<div id="heroSlider" class="owl-carousel">
<div class="item"><img src="https://cdn.shopify.com/s/files/1/0246/3225/files/2girlsinTSHIRT.jpg?2088744847513182869" /></div>
<div class="item"><img src="https://cdn.shopify.com/s/files/1/0246/3225/files/2girlsinTSHIRT.jpg?2088744847513182869" /></div>
<div class="item"><img src="https://cdn.shopify.com/s/files/1/0246/3225/files/2girlsinTSHIRT.jpg?2088744847513182869" /></div>
</div>


{% endif %}


Seems to be an issue with the jQuery.

When I have
{{ 'jquery-1.10.2.min.js' | asset_url | script_tag }}
{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}
{{ 'owl.carousel.js' | asset_url | script_tag }}


I can at least see the images. Without one or they other, they disappear.

Answer

You're having a problem with jQuery.noConflict(). You're calling it, then trying to run:

$(document).ready(function() {
  $("#heroSlider").owlCarousel({
    // ...
  });  
});

Later, you're restoring $ with $ = jQuery;, but it's too late.

Use jQuery(document).ready(function() {... instead