jQuery Slick Slider seems to have the same width when resizing

Question

I noticed jQuery is not resizing as it should be, the width value is the same. To change width I have to either f5, scroll or click button for it to work. Here are the screenshots of what happens when resize occurs, from eg. 425px to 687px:

here is 425px before resize: http://s32.postimg.org/rvf8nzadx/image.jpg

after resizing to 687px: http://postimg.org/image/ashz8ygy9/

as you can see the width value is still the same, it should really look like this: http://s32.postimg.org/nzue56vkl/image.jpg

The only way for it to work & look like the last screenshot is to either f5, scroll or click a button.

The 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>

After the first re-size, if I scroll or mouse click the active button, eg: .date-nav-1, it resizes correctly. Here are the elements generated by slick:

wrong values

slick-track {
width: 3250px;
transform: translate3d(-650px, 0px, 0px);

list1 {
width: 650px;

correct

slick-track {
width: 2275px;
transform: translate3d(-650px, 0px, 0px);

list1 {
width: 325px;

Code seems fine, am i missing something? Thanks,