Shopify 轮播、Owl、滑块、ResponsiveSlides

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

然后html首页的JS是这样的：

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

没有任何效果，我在 Whosebug 上找到了这个

没有任何效果所以我在 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 轮播、Owl、滑块、ResponsiveSlides

Shopify Carousels, Owl, slider, ResponsiveSlides

shopify

owl-carousel