猫头鹰旋转木马和shopify

时间:2017-03-13 04:42:14

标签: shopify owl-carousel

我正在创建一个由shopify提供支持的网页,它为我提供了自定义页面的选项。我正在尝试放入一个猫头鹰旋转木马并且在其中一个主题中它完美地工作(流行主题),但是当放置在另一个主题(首次亮相主题)时,它不起作用。它显示样式表和脚本似乎没有阅读的图像。

  <script src="{{ 'jquery-3.1.1.min.js' | asset_url }}"></script>  
  <script src="{{ 'owl.carousel.js' | asset_url }}"></script>
    <script src=" {{ 'owl.carousel.min.js' | asset_url }}"></script>

<script>
            $(document).ready(function() {
              var owl = $('.owl-carousel');
              owl.owlCarousel({
                margin: 10,
                nav: true,
                loop: true,
                autoplay:true,
                autoplayTimeout:2000,
                autoplayHoverPause:true,
              
                responsive: {
                  0: {
                    items: 1
                  },
                  600: {
                    items: 3
                  },
                  1000: {
                    items: 5
                  }
                }
              })
            })
          </script>
      
   
        <link rel="stylesheet" href="{{ 'owl.carousel.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'owl.theme.default.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'owl.carousel.min.css' | asset_url}}">
  

        <div class="owl-carousel owl-theme">
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>1</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>2</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>3</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>4</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>5</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>6</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>7</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>8</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>9</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>10</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>11</h4></div>
    <div class="item"><img src="https://cdn.shopify.com/s/files/1/1777/9785/files/c_a_3.jpg?16781934716315122188"><h4>12</h4></div>
</div>
        
  

这些是我使用的代码,我不知道是什么阻止它在首次亮相主题中阅读代码,但它要么根本没有显示图像,要么以直线垂直线显示图像。我已经苦苦挣扎了2天,如果有人有答案,我会非常感激。

0 个答案:

没有答案