我注意到jQuery没有调整大小,宽度值是相同的。要更改宽度,我必须使用f5,滚动或单击按钮才能工作。以下是调整大小时发生的事情的屏幕截图,例如。 425px到687px:
这是调整大小前的425px: http://s32.postimg.org/rvf8nzadx/image.jpg
调整大小到687px后: http://postimg.org/image/ashz8ygy9/
你可以看到宽度值仍然相同,它应该看起来像这样: http://s32.postimg.org/nzue56vkl/image.jpg
工作的唯一途径&看起来最后一个截图是f5,滚动或点击一个按钮。
jquery:
<script>
jQuery(document).ready(function(){
var slickobject = null;
jQuery(window).trigger('resize');
jQuery(window).resize(function() {
if(jQuery(window).width() < 640){
$slickobject = jQuery('#slider').slick({});
jQuery('.date-nav-1').click(function(){
$slickobject.slick('slickGoTo','0');
});
jQuery('.date-nav-2').click(function(){
$slickobject.slick('slickGoTo','1');
});
jQuery('.date-nav-3').click(function(){
$slickobject.slick('slickGoTo','2');
});
jQuery('#slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
if(currentSlide == '0'){
jQuery('.date-nav-1').addClass('active');
jQuery('.date-nav-3').removeClass('active');
jQuery('.date-nav-2').removeClass('active');
}
else if(currentSlide == '1'){
jQuery('.date-nav-2').addClass('active');
jQuery('.date-nav-1').removeClass('active');
jQuery('.date-nav-3').removeClass('active');
}
else if(currentSlide == '2'){
jQuery('.date-nav-3').addClass('active');
jQuery('.date-nav-2').removeClass('active');
jQuery('.date-nav-1').removeClass('active');
}
console.log(currentSlide);
});
// left
}
else if((jQuery(window).width() > 639) && (jQuery(window).width() < 960))
{
$slickobject = jQuery('#slider').slick({slidesToShow: 2});
jQuery('.date-nav-1').click(function(){
$slickobject.slick('slickGoTo','0');
});
jQuery('.date-nav-3').click(function(){
$slickobject.slick('slickGoTo','1');
});
jQuery('#slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
if(currentSlide == '0'){
jQuery('.date-nav-1').addClass('active');
jQuery('.date-nav-3').removeClass('active');
}
else if((currentSlide == '1') || (currentSlide == '2')){
jQuery('.date-nav-3').addClass('active');
jQuery('.date-nav-1').removeClass('active');
}
console.log(currentSlide);
});
}
else {
$slickobject.slick('unslick');
}
});
});
</script>
在第一次重新调整大小后,如果我滚动或鼠标单击活动按钮,例如:.date-nav-1,它会正确调整大小。 以下是光滑生成的元素:
错误值
slick-track {
width: 3250px;
transform: translate3d(-650px, 0px, 0px);
list1 {
width: 650px;
正确
slick-track {
width: 2275px;
transform: translate3d(-650px, 0px, 0px);
list1 {
width: 325px;
代码似乎很好,我错过了什么?谢谢,