Shopify轮播，猫头鹰，滑块，响应式幻灯片 [英] Shopify Carousels, Owl, slider, ResponsiveSlides

问题描述

请有人帮助我尝试实现3种轮播，但没有任何效果:

Please can someone help I have tried to implement 3 kinds of carousels and nothing is working:

http://owlgraphic.com/owlcarousel/

http://slidesjs.com/

http://sensitiveslides.com/

什么都行不通，我添加了JS和CSS，如下所示:

Nothing works, I have added the JS and CSS like this:

 <!-- 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，如下所示:

Then the html with the JS on the home page like this:

  <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上发现了这个

Nothing works nothing, i found this on stackoverflow

Owl Carousel:无法加载Javascript. Shopify问题还是代码问题?

什么都没用，所以我在shopify论坛上发现了这个

Nothing works so i found this on the shopify forum

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

没有任何效果，请有人帮忙吗?

Nothing works, please can someone help?

谢谢

推荐答案

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

jQuery uses the $ sign as a shortcut for jQuery.

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

What if other JavaScript frameworks (Angular, Backbone, etc) also use the $ sign as a shortcut? If two different frameworks are using the same shortcut, one of them might stop working.

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

The jQuery team have already thought about this, and implemented the noConflict() method. The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.

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

You can of course still use jQuery, simply by writing the full name instead of the shortcut.

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

So either Remove jQuery.noConflict();from your JavaScript. Or if you really need to use it, change

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

到

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

JSFiddle演示

这篇关于Shopify轮播，猫头鹰，滑块，响应式幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！