我有一个 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>
任何帮助/建议将不胜感激。谢谢。