Shopify Karussells, Eule, Schieber, ResponsiveSlides

Question

Bitte jemand helfen kann Ich habe versucht, drei Arten von Karussells zu implementieren und nichts funktioniert:

http://owlgraphic.com/owlcarousel/

http://slidesjs.com/

http://responsiveslides.com/

Nichts funktioniert Ich habe das JS und CSS wie folgt hinzugefügt:

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

Dann wird der HTML-Code mit dem JS auf der Homepage wie folgt aus:

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

Nichts nichts funktioniert, fand ich dies auf Stackoverflow

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

Nichts funktioniert so fand ich diese auf dem Shopify Forum

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

Nichts funktioniert, p Leasing kann jemand helfen?

Dank

Answer 1

jQuery verwendet das $ Zeichen als Abkürzung für jQuery.

Was ist, wenn andere JavaScript-Frameworks (Angular, Backbone usw.) auch das $-Zeichen als Abkürzung verwenden? Wenn zwei verschiedene Frameworks denselben Shortcut verwenden, funktioniert einer von ihnen möglicherweise nicht mehr.

Das jQuery-Team hat bereits darüber nachgedacht und die noConflict()-Methode implementiert. Die Methode noConflict() gibt den Halt für die Verknüpfungs-ID $ frei, damit andere Skripts sie verwenden können.

Sie können natürlich weiterhin jQuery verwenden, indem Sie einfach den vollständigen Namen anstelle der Verknüpfung eingeben.

Also entfernen Sie entweder jQuery.noConflict(); von Ihrem JavaScript. Oder wenn Sie es wirklich verwenden müssen, ändern

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

zu

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

JSFiddle DEMO