Question

请有人帮忙我试图实现3种旋转木马，但没有任何工作：

没有任何作用，我已经添加了这样的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>

什么都没有用，我在stackoverflow上发现了这个

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

没有任何作用，请有人帮忙吗？

由于

Answer 1

jQuery使用$符号作为jQuery的快捷方式。

如果其他JavaScript框架（Angular，Backbone等）也使用$符号作为快捷方式怎么办？如果两个不同的框架使用相同的快捷方式，则其中一个框架可能会停止工作。

jQuery团队已经考虑过这个问题，并实现了noConflict()方法。 noConflict()方法释放$快捷方式标识符的保留，以便其他脚本可以使用它。

您当然可以使用jQuery，只需编写全名而不是快捷方式。

从JavaScript中删除jQuery.noConflict();。或者，如果您确实需要使用它，请更改

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

到

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

JSFiddle DEMO

Shopify Carousels，猫头鹰，滑块，ResponsiveSlides

1 个答案: