slider not funtion if SlidesToShow equal to sliders

if SlidesToShow is equal to num of Sliders it is not working

but i need it for the Nav Slider

    $('.slider').slick({
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.slider-nav',
        draggable: mobile
    });

    $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: true,
        centerMode: true,
        focusOnSelect: true,
        arrows: false,
        asNavFor: '.slider'
    });

        <div class="slider-nav">
            <div><span class="menu-entry">1</span></div>
            <div><span class="menu-entry">2</span></div>
            <div><span class="menu-entry">3</span></div>
        </div>

        <div class="slider">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>

[kenwheeler]

Thats by default. If you show 3 slides, and there are only 3 slides, what are you going to slide?

[ghost]

I have fixed this like this.

1. setupInfinite()

Slick.prototype.setupInfinite = function() {

    var _ = this,
        i, slideIndex, infiniteCount;

    if (_.options.fade === true) {
        _.options.centerMode = false;
    }

    if (_.options.infinite === true && _.options.fade === false) {

        slideIndex = null;

        if (_.slideCount >= _.options.slidesToShow) {

            if (_.options.centerMode === true) {
                infiniteCount = _.options.slidesToShow + 1;
            } else {
                infiniteCount = _.options.slidesToShow;
            }

            for (i = _.slideCount; i > (_.slideCount -
                    infiniteCount); i -= 1) {
                slideIndex = i - 1;
                $(_.$slides[slideIndex]).clone(true).attr('id', '')
                    .attr('data-slick-index', slideIndex - _.slideCount)
                    .prependTo(_.$slideTrack).addClass('slick-cloned');
            }
            for (i = 0; i < infiniteCount; i += 1) {
                slideIndex = i;
                $(_.$slides[slideIndex]).clone(true).attr('id', '')
                    .attr('data-slick-index', slideIndex + _.slideCount)
                    .appendTo(_.$slideTrack).addClass('slick-cloned');
            }
            _.$slideTrack.find('.slick-cloned').find('[id]').each(function() {
                $(this).attr('id', '');
            });

        }

    }

};

1. buildArrows()

Slick.prototype.buildArrows = function() {

    var _ = this;

    if (_.options.arrows === true ) {

        _.$prevArrow = $(_.options.prevArrow).addClass('slick-arrow');
        _.$nextArrow = $(_.options.nextArrow).addClass('slick-arrow');

        if( _.slideCount >= _.options.slidesToShow ) {

            _.$prevArrow.removeClass('slick-hidden').removeAttr('aria-hidden tabindex');
            _.$nextArrow.removeClass('slick-hidden').removeAttr('aria-hidden tabindex');

            if (_.htmlExpr.test(_.options.prevArrow)) {
                _.$prevArrow.prependTo(_.options.appendArrows);
            }

            if (_.htmlExpr.test(_.options.nextArrow)) {
                _.$nextArrow.appendTo(_.options.appendArrows);
            }

            if (_.options.infinite !== true) {
                _.$prevArrow
                    .addClass('slick-disabled')
                    .attr('aria-disabled', 'true');
            }

        } else {

            _.$prevArrow.add( _.$nextArrow )

                .addClass('slick-hidden')
                .attr({
                    'aria-disabled': 'true',
                    'tabindex': '-1'
                });

        }

    }

};

1. postslide()

Slick.prototype.postSlide = function(index) {

    var _ = this;

    if( !_.unslicked ) {

        _.$slider.trigger('afterChange', [_, index]);

        _.animating = false;

        if (_.slideCount >= _.options.slidesToShow) {
            _.setPosition();
        }

        _.swipeLeft = null;

        if ( _.options.autoplay ) {
            _.autoPlay();
        }

        if (_.options.accessibility === true) {
            _.initADA();
        }

    }

};

1. ChangeSlide Slick.prototype.changeSlide = function(event, dontAnimate) {

    var _ = this,
        $target = $(event.currentTarget),
        indexOffset, slideOffset, unevenOffset;
   
    // If target is a link, prevent default action.
    if($target.is('a')) {
        event.preventDefault();
    }
   
    // If target is not the <li> element (ie: a child), find the <li>.
    if(!$target.is('li')) {
        $target = $target.closest('li');
    }
   
    unevenOffset = (_.slideCount % _.options.slidesToScroll !== 0);
    indexOffset = unevenOffset ? 0 : (_.slideCount - _.currentSlide) % _.options.slidesToScroll;
   
    switch (event.data.message) {
   
        case 'previous':
            slideOffset = indexOffset === 0 ? _.options.slidesToScroll : _.options.slidesToShow - indexOffset;
            if (_.slideCount >= _.options.slidesToShow) {
                _.slideHandler(_.currentSlide - slideOffset, false, dontAnimate);
            }
            break;
   
        case 'next':
            slideOffset = indexOffset === 0 ? _.options.slidesToScroll : indexOffset;
            if (_.slideCount >= _.options.slidesToShow) {
                _.slideHandler(_.currentSlide + slideOffset, false, dontAnimate);
            }
            break;
   
        case 'index':
            var index = event.data.index === 0 ? 0 :
                event.data.index || $target.index() * _.options.slidesToScroll;
   
            _.slideHandler(_.checkNavigable(index), false, dontAnimate);
            $target.children().trigger('focus');
            break;
   
        default:
            return;
    }
   

   };

2. InfiteArrowEvents()

Slick.prototype.initArrowEvents = function() {

    var _ = this;

    if (_.options.arrows === true && _.slideCount >= _.options.slidesToShow) {
        _.$prevArrow
           .off('click.slick')
           .on('click.slick', {
                message: 'previous'
           }, _.changeSlide);
        _.$nextArrow
           .off('click.slick')
           .on('click.slick', {
                message: 'next'
           }, _.changeSlide);
    }

};

So far, there is only change for ( > ). I changed it to ( >= ).

The last is important. 6. getLeft()

Slick.prototype.getLeft = function(slideIndex) {

    var _ = this,
        targetLeft,
        verticalHeight,
        verticalOffset = 0,
        targetSlide;

    _.slideOffset = 0;
    verticalHeight = _.$slides.first().outerHeight(true);

    if (_.options.infinite === true) {
        if (_.slideCount > _.options.slidesToShow) {
            _.slideOffset = (_.slideWidth * _.options.slidesToShow) * -1;
            verticalOffset = (verticalHeight * _.options.slidesToShow) * -1;
        } else  if(_.slideCount == _.options.slidesToShow)
        {
          _.slideOffset = (_.slideWidth * (_.options.slidesToShow-1)) * -1;
            verticalOffset = (verticalHeight * (_.options.slidesToShow-1)) * -1;
        }
          
        if (_.slideCount % _.options.slidesToScroll !== 0) {
          
            if (slideIndex + _.options.slidesToScroll > _.slideCount && _.slideCount > _.options.slidesToShow) {
                if (slideIndex > _.slideCount) {
                    _.slideOffset = ((_.options.slidesToShow - (slideIndex - _.slideCount)) * _.slideWidth) * -1;
                    verticalOffset = ((_.options.slidesToShow - (slideIndex - _.slideCount)) * verticalHeight) * -1;
                } else {
                    _.slideOffset = ((_.slideCount % _.options.slidesToScroll) * _.slideWidth) * -1;
                    verticalOffset = ((_.slideCount % _.options.slidesToScroll) * verticalHeight) * -1;
                }
            }
        }
    } else {
        if (slideIndex + _.options.slidesToShow > _.slideCount) {
            _.slideOffset = ((slideIndex + _.options.slidesToShow) - _.slideCount) * _.slideWidth;
            verticalOffset = ((slideIndex + _.options.slidesToShow) - _.slideCount) * verticalHeight;
        }
    }

    if (_.slideCount < _.options.slidesToShow) {
        _.slideOffset = 0;
        verticalOffset = 0;
    }
  	

    if (_.options.centerMode === true && _.slideCount < _.options.slidesToShow) {
        _.slideOffset = ((_.slideWidth * Math.floor(_.options.slidesToShow)) / 2) - ((_.slideWidth * _.slideCount) / 2);
    } else if (_.options.centerMode === true && _.options.infinite === true) {
        _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2) - _.slideWidth;
    } else if (_.options.centerMode === true) {
        _.slideOffset = 0;
        _.slideOffset += _.slideWidth * Math.floor(_.options.slidesToShow / 2);
    }
  
  
    if (_.options.vertical === false) {
        targetLeft = ((slideIndex * _.slideWidth) * -1) + _.slideOffset;
    } else {
        targetLeft = ((slideIndex * verticalHeight) * -1) + verticalOffset;
    }
  
    if (_.options.variableWidth === true) {
      
        if (_.slideCount <= _.options.slidesToShow || _.options.infinite === false) {
            targetSlide = _.$slideTrack.children('.slick-slide').eq(slideIndex);
        } else {
          
            targetSlide = _.$slideTrack.children('.slick-slide').eq(slideIndex + _.options.slidesToShow);
        }

        if (_.options.rtl === true) {
          
            if (targetSlide[0]) {
                targetLeft = (_.$slideTrack.width() - targetSlide[0].offsetLeft - targetSlide.width()) * -1;
            } else {
                targetLeft =  0;
            }
        } else {
          
            targetLeft = targetSlide[0] ? targetSlide[0].offsetLeft * -1 : 0;
        }

        if (_.options.centerMode === true) {
            if (_.slideCount <= _.options.slidesToShow || _.options.infinite === false) {
                targetSlide = _.$slideTrack.children('.slick-slide').eq(slideIndex);
            } else {
                targetSlide = _.$slideTrack.children('.slick-slide').eq(slideIndex + _.options.slidesToShow + 1);
            }

            if (_.options.rtl === true) {
                if (targetSlide[0]) {
                    targetLeft = (_.$slideTrack.width() - targetSlide[0].offsetLeft - targetSlide.width()) * -1;
                } else {
                    targetLeft =  0;
                }
            } else {
                targetLeft = targetSlide[0] ? targetSlide[0].offsetLeft * -1 : 0;
            }

            targetLeft += (_.$list.width() - targetSlide.outerWidth()) / 2;
        }
    }
  
    return targetLeft;

};

My example is slidecount = 3, slidesToShow=3, slidestoScroll =3. the slidesToshow is not concerned so much.

I hope this can be helpful who uses the slick. Thanks kenwheeler. Your Slick.js supports me so much. Thanks again.