Shopify 캐 러셀, 올빼미, 슬라이더, ResponsiveSlides

Question

사람의 도움을 나는 회전 목마 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에 발견 그렇게 작동하지 않습니다 유래에 발견 포럼 아무것도 작동하지 않습니다

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

, P 누군가가 도와 줄 수 있습니까?

감사

Answer 1

jQuery를 JQuery와에 대한 바로 가기로 $ 기호를 사용합니다.

다른 JavaScript 프레임 워크 (각도, 백본 등)에서도 $ 기호를 바로 가기로 사용하면 어떨까요? 두 개의 서로 다른 프레임 워크가 동일한 바로 가기를 사용하는 경우 그 중 하나가 작동을 멈출 수 있습니다.

jQuery 팀은 이미 이것을 고려하여 noConflict() 메소드를 구현했습니다. noConflict() 메서드는 $ 바로 가기 식별자의 보류를 해제하므로 다른 스크립트에서도 사용할 수 있습니다.

물론 단축키 대신 전체 이름을 쓰면 jQuery를 사용할 수 있습니다.

JavaScript의 경우 jQuery.noConflict();을 삭제하십시오. 당신이 정말로 그것을 사용해야하는 경우 또는, 난 그냥으로 정확한 코드를 복사 그냥했다 @NickTheWrench

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

에

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

JSFiddle DEMO