调整

时间:2016-05-02 23:36:39

标签: jquery slick.js

我注意到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;

代码似乎很好,我错过了什么?谢谢,

0 个答案:

没有答案