使用OwlCarousel2-无法自动播放

Question

我正在使用OwlCarousel2，但无法自动播放。感谢您的帮助

{{ 'owl.carousel.min.css' | asset_url | stylesheet_tag }}

{{ 'owl.theme.default.min.css' | asset_url | stylesheet_tag }}

{{ 'owl.carousel.js' | asset_url | script_tag }}

<div id="Gallery" name="Gallery"></div>

<h1 class="gallery-header">GALLERY</h1>

<div class="carousel owl-carousel owl-theme">
  {% for product in collections[section.settings.carousel].products %}
    {% assign index = forloop.index0 %}
    <div class="carousel-item">
      <a href="{{ product.url | within: collection }}" class="list-view-item">
        <img class="carousel-product-image" src="{{ product.featured_image.src | img_url: '253x253', scale: 2 }}" alt="{{ product.featured_image.alt | escape }}">
        <div class="h4 grid-view-item__title item-name">
          {{ product.title }}
          <button id="addToCartButton--carousel{{ index }}" class="btn add-to-cart-btn">
            <div class="plus-wrapper">+</div>
          </button>
          <script type="text/javascript">
            $('#addToCartButton--carousel{{index}}').click(function(e) {
              e.preventDefault();
              $.ajax({
                url:'/cart/add',
                type:'post',
                data:"id={{ product.variants.first.id }}&quantity=1"
              });
            });
          </script>
        </div>
      </a>
    </div>
  {% endfor %}
</div>

<script>
(function($) {
    $(document).ready(function(){
        $(".carousel").owlCarousel({
            items: 1,
            loop: true,
            stagePadding: 5,
            mouseDrag: true,
            margin: 25,
            dots: false,
            nav: true,
            navText : ["←","→"],
            navClass: ["owl-prev desktop-only", "owl-next desktop-only"],
            lazyLoad: true,
            autoplay: true,
            autoplayTimeout: 2500,
            autoplaySpeed: 2500,
            smartSpeed: 2500,
            responsive: {
              0: {
                 items: 1,
                 nav: true,
                 loop: true
              },
              480: {
                 items: 2,
                 nav: true,
                 loop: true
              },
              768: {
                 items: 3,
                 nav: true,
                 loop: true
              },
              1000: {
                 items: 4,
                 nav: true,
                 loop: true
              }
           }
        });

    $(".owl-nav > button").on('click', function() {
      $(".carousel").trigger('stop.owl.autoplay');
      $(".carousel").trigger('play.owl.autoplay', [2500, 2500]);
    });

    $(".carousel")
      .css({
        "touch-action": "manipulation"
      })
      .on('touchend mousedown mouseup', function(e) {
          $(".carousel").trigger('stop.owl.autoplay');
          $(".carousel").trigger('play.owl.autoplay', [2500, 2500]);
    })
  });
})(jQuery);

</script>

<style>

  #Gallery {
    transform: translateY(-90px);
    visibility: hidden;
  }

  .gallery-header {
    text-align: center;
    padding: 25px;
    font-family: ProximaNova-Regular, Verdana, Tahoma;
    letter-spacing: 3px;
  }

  .carousel.owl-carousel {
    max-width: 90%;
    margin-left: 5%;
    overflow-x: hidden;
  }

  .owl-stage-outer {
    overflow: visible !important;
  }

    .carousel-item {
    overflow: hidden;
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: visible;
    }

  .item-name {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
  }

  .carousel-item:hover {
    box-shadow: 0px 0px 15px -3px
  }

    .owl-prev {
        left: 0;
    transform: translateX(-2vw);
    }

    .owl-next {
        right: 0;
    transform: translateX(2vw);
    }

    .owl-theme .owl-nav [class^=owl-]:hover {
        background: rgb(100,100,100,0.9);
    text-decoration: none;
    }

    .owl-theme .owl-nav [class^=owl-] {
    /* position: absolute;
    top: 50%; */
    color: black;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.23;
    margin: 5px;
    padding: 4px 7px;
    background-color: rgb(255,255,255);
    display: inline-block;
    cursor: pointer;
    border: none;
    border-radius: 100px;
    width: 32px;
    box-shadow: 0px 0px 5px #000;
    }
</style>

{% schema %}
  {
    "name": "Carousel",
    "class": "index-section",
    "settings": [
      {
        "type": "collection",
        "id": "carousel",
        "label": "Collection"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image slides",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Carousel",
        "category": "Image"
      }
    ]
  }
{% endschema %}

我在shopify工作。 jQuery 3.3.1。

忽略此，因为我不知道还有什么写，但stackexchange是让我多写，因为我的岗位大多是代码blahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh