Shopify Carousels, Owl, Slider, ResponsiveSlides

- 1 answer

Please can someone help I have tried to implement 3 kinds of carousels and nothing is working:

Nothing works, I have added the JS and CSS like this:

 <!-- CSS ================================================== -->
  {{ 'timber.scss.css' | asset_url | stylesheet_tag }}
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
  {{ 'index.css' | asset_url | stylesheet_tag }}
  {{ 'owl.css' | asset_url | stylesheet_tag }}
  {{ 'scoot-baby.css' | asset_url | stylesheet_tag }}

   <!-- JS ================================================== -->
  {{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}
  {{ 'owl.carousel.js' | asset_url | script_tag }}

Then the html with the JS on the home page like this:

  <div id="owl-demo" class="owl-carousel owl-theme">

      <div class="item"><img src="" alt="The Last of us"></div>
      <div class="item"><img src="" alt="GTA V"></div>
      <div class="item"><img src="" alt="Mirror Edge"></div>


    #owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;

    $(document).ready(function() {

      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem : true

      // "singleItem:true" is a shortcut for:
      // items : 1,
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false


Nothing works nothing, i found this on stackoverflow

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

Nothing works so i found this on the shopify forum

Nothing works, please can someone help?




jQuery uses the $ sign as a shortcut for jQuery.

What if other JavaScript frameworks (Angular, Backbone, etc) also use the $ sign as a shortcut? If two different frameworks are using the same shortcut, one of them might stop working.

The jQuery team have already thought about this, and implemented the noConflict() method. The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.

You can of course still use jQuery, simply by writing the full name instead of the shortcut.

So either Remove jQuery.noConflict();from your JavaScript. Or if you really need to use it, change

$(document).ready(function() {


jQuery(document).ready(function() {