猫头鹰轮播：不会加载JavaScript。 Shopify发行还是代码发行？

Question

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 1

It looks like your including owl carousel before jquery. Try

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

Answer 2

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

Answer 3

Dude this now works, get rid of the JS

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

And put this under the jQuery links in the header, Shopify already has JQuery, you do not need more Jquery, as it will disable the carousel. So you just need the owl carousel js, shopify does the rest. I found this out the hard way.

{{ 'owl.carousel.js' | asset_url | script_tag }}

You will get the result you need.

Here is the question i raised as well.

Shopify Carousels, Owl, slider, ResponsiveSlides

Answer 4

As stated at the official Github page for Owl Carousel , this happens because the jQuery is being loaded after the library.

You simply need to wait for jQuery to load. Do it like this:

$(document).ready(function () {
    (function ($) {
        $('.owl-carousel').owlCarousel({
            ...
        });
    })(jQuery);
});

and everything should work just fine.