Question

我正在自定义一个使用猫头鹰轮播版本1.3.3的主题，问题是它在加载页面时一次显示幻灯片的所有图像，然后轮播正常工作您可以在移动视图中查看问题：https://tanzire.co/collections/relaxed-and-casual/products/white-semi-precious-stone-danglers-earrings

这是HTML

 <div id="featuted-image-mobile" class="image featured-mobile">
                  {% if product.images.size > 0 %}         
                  {% for image in product.images %}
                  <div class="image-item">
                    <a href="#" class="thumbnail id_{{ image.id }}" data-id="{{forloop.index}}"> 

                      <img id="Image-{{ image.id }}-{{ responsive_image_counter }}" class="responsive-image__image blur-up lazyload {{ image_class }}" src="{{ image | product_img_url: '600x' }}"
                             data-src="{{   image | product_img_url: '600x' }}"
                             data-sizes="auto"
                           alt="{{ image.alt | escape }}" data-item="{{forloop.index}}" />
                    </a>
                  </div>
                  {% endfor %}
                  {% else %}
                  <img src="{{ 'No_Image_2.png' | asset_url }}" />
                  {% endif %}
                </div>

这是与此滑块相关的jQuery

  $(window).load(function() {
      /* Slider Thumb */
      if($("#product #featuted-image-mobile").length){
        $("#product #featuted-image-mobile").owlCarousel({
          navigation : false,
          pagination: true,
          autoPlay: false,
          singleItem: true,
          items: 1,

          slideSpeed : 200,
          paginationSpeed : 800,
          rewindSpeed : 1000,
          itemsDesktop : [1199,1],
          itemsDesktopSmall : [979,1],
          itemsTablet: [768,1],
          itemsTabletSmall: [540,1],
          itemsMobile : [360,1],
        });

      }
      new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true });     

    });
    $(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

我尝试添加加载程序，但是它对我不起作用

猫头鹰轮播一次显示所有图像

0 个答案: