需要向下滚动,才能在 slick.js 轮播上正确加载图像

问题描述 投票:0回答:0

我有一个 wordpress 网站,我使用 slick.js 作为我的轮播。我有一个奇怪的问题,在我向下滚动之前图像无法正确加载。下面是我的链接,我还附上了我的 jquery 代码。

链接:https://getgoally.com/tablets/

代码:

<script type="text/javascript">
$(document).ready(function() {
  
  $('.sliders-container').slick({
    dots: true,
    arrows: true
  });

  $(".tabs-list li a").click(function(e){
     e.preventDefault();
  });
  
  $(".tabs-list li").click(function(){
    $('.sliders-container').slick('refresh');
    var tabid = $(this).find("a").attr("href");
    $(".tabs-list li,.tabs div.tab").removeClass("active");   // removing active class from tab
    $(".tab").hide();   // hiding open tab
    $(tabid).show();    // show tab
    $(this).addClass("active"); //  adding active class to clicked tab
  });
  
  /*FORM*/
  let selectedTab = "seven-inch";
  let clickDiv = null;
  $('.five-inch-shortcode-container').hide();
  $(".tabs-list li").click(function(){
    selectedTab = $(this).attr("id");
    
    if(selectedTab == 'seven-inch'){
        $('.five-inch-shortcode-container').hide();
        $('.seven-inch-shortcode-container').show();
    } else{
        $('.seven-inch-shortcode-container').hide();
        $('.five-inch-shortcode-container').show();
    }
  });

  $('.seven-inch-container>div').click(function(){
     $(this).find('input').prop('checked', true);
     $(this).siblings().css("border", "0.5px solid #a7a7a7");
     $(this).siblings().find('.device-name-container').css("border-bottom", "0.5px solid #a7a7a7");
     $(this).siblings().find('.price-container').css("background", "white");
     $(this).css("border", "0.5px solid #000000");
     $(this).find('.device-name-container').css("border-bottom", "0.5px solid #000000");
     clickDiv = $(this).attr('class');

     if(clickDiv == 'pink-device'){
         $(this).find('.price-container').css("background", "#FFF0F4");
     }
     if(clickDiv == 'blue-device'){
        $(this).find('.price-container').css("background", "#e9f1fd");
     }
     if(clickDiv == 'own-device'){
        $(this).find('.price-container').css("background", "#F3F3F3");
     }
  });

  $('.five-inch-container>div').click(function(){
    $(this).find('input').prop('checked', true);
    $(this).siblings().css("border", "0.5px solid #a7a7a7");
    $(this).siblings().find('.device-name-container').css("border-bottom", "0.5px solid #a7a7a7");
    $(this).siblings().find('.price-container').css("background", "white");
    $(this).css("border", "0.5px solid #000000");
    $(this).find('.device-name-container').css("border-bottom", "0.5px solid #000000");
    clickDiv = $(this).attr('class');
 
    if(clickDiv == 'blue-device'){
       $(this).find('.price-container').css("background", "#F3F3F3");
    }

    if(clickDiv == 'own-device'){
       $(this).find('.price-container').css("background", "#F3F3F3");
    }
    
  
 });

  $(".input-container>div").hover(function(){
    $(this).css("border", "0.5px solid #000000");
    $(this).find('.device-name-container').css("border-bottom", "0.5px solid #000000");
    }, function(){
      let hoverDiv = $(this).attr('class');
      if( hoverDiv != clickDiv){
        $(this).css("border", "0.5px solid #a7a7a7");
        $(this).find('.device-name-container').css("border-bottom", "0.5px solid #a7a7a7");
      }
  });

  /*END FORM*/

});
</script>

任何帮助/建议将不胜感激。谢谢。

jquery slick.js
© www.soinside.com 2019 - 2024. All rights reserved.