Shopifyカルーセル、フクロウ、スライダー、ResponsiveSlides

Question

誰かの助けIは、カルーセルの3種類を実装しようとしていることができ、何も作業していないしてください：

http://owlgraphic.com/owlcarousel/

http://slidesjs.com/

http://responsiveslides.com/

何もない作品私はこのようにJSとCSSを追加しました：

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

は、このようなホームページ上のJSとHTML：

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

何も何も機能していないが、私は

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

何も私はshopify上でこれを見つけたので、働かないStackOverflowの上でこれを見つけましたフォーラム何も動作

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

、P誰かを助けることができますか？

おかげ

Answer 1

jQueryのは、jQueryのためのショートカットとして$記号を使用しています。

他のJavaScriptフレームワーク（角度、バックボーンなど）でもショートカットとして$記号を使用するとどうなりますか？ 2つの異なるフレームワークが同じショートカットを使用している場合、そのうちの1つが機能しなくなる可能性があります。

jQueryチームはこれについて既に考えており、noConflict()メソッドを実装しました。 noConflict()メソッドは、$ショートカット識別子の保留を解放し、他のスクリプトでも使用できます。

もちろん、ショートカットではなくフルネームを書くだけでjQueryを使用することもできます。

あなたのJavaScriptからjQuery.noConflict();を削除してください。あなたが実際にそれを使用する必要がある場合や、私はちょうどにあなたの正確なコードをコピーしただけのことをやった@NickTheWrench

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

へ

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

JSFiddle DEMO