Shopify Carousels, Owl, slider, ResponsiveSlides

问题

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

http://owlgraphic.com/owlcarousel/

http://slidesjs.com/

http://responsiveslides.com/

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="https://cdn.shopify.com/s/files/1/1334/7245/t/1/assets/fullimage1.jpg?15259394755119812233" alt="The Last of us"></div>
      <div class="item"><img src="https://cdn.shopify.com/s/files/1/1334/7245/t/1/assets/fullimage2.jpg?15259394755119812233" alt="GTA V"></div>
      <div class="item"><img src="https://cdn.shopify.com/s/files/1/1334/7245/t/1/assets/fullimage3.jpg?15259394755119812233" alt="Mirror Edge"></div>

    </div>

  <style>
    #owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
    }
    </style>

    <script>
      jQuery.noConflict();
    $(document).ready(function() {
      $("#owl-demo").owlCarousel({

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

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

      });
    });
    </script>

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

https://ecommerce.shopify.com/c/ecommerce-design/t/how-to-use-owl-carousel-for-blog-355756

Nothing works, please can someone help?

Thanks

回答1:

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() {
  $("#owl-demo").owlCarousel({

jQuery(document).ready(function() {
  jQuery("#owl-demo").owlCarousel({

JSFiddle DEMO

来源：https://stackoverflow.com/questions/39401375/shopify-carousels-owl-slider-responsiveslides

标签

shopify

owl-carousel