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.

回答1:

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

回答2:

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 }}

回答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

回答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.

来源：https://stackoverflow.com/questions/32359498/owl-carousel-javascript-wont-load-shopify-issue-or-code-issue

标签

javascript

jquery

css

shopify

owl-carousel