Slick: slider not funtion if SlidesToShow equal to sliders

[celevra]

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?

[celevra]

the slider where the sider-nav is the nav for... there is a slidesToShow: 1 set

[kenwheeler]

Ok I'll look into it.

[nordbit]

I can confirm.
It's screenshot from MacAppStore, example, we want some like this, simple image switcher with thumbnails, but when all thumbnails are showed (read - "slidesToShow" are qual to number of images on slider) slick.js stop responding

[kenwheeler]

Ahhhhhh ok.

[celevra]

Hi

i've seen commits from you in this direction, is it fixed?

regards

[kenwheeler]

It's getting there. Was trying to get 1.3.8 pushed out today, but my newborn had other plans.

[celevra]

newborn is definitly higher priority!
Thanks for your work

[kenwheeler]

This should be fixed on master

[celevra]

thank you very much for your work.
now there are no errors and the page is loading, but there are multiple slick-center classes on the menu-entry's

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

[kenwheeler]

Can you make a jsfiddle? I need to see it in action to determine what's going on.

[neerajgoyal12]

jsfiddle
The Issue

1. Play with large-slick arrows.
2. Try clicking on any small-slick slides.

[kenwheeler]

@neerajgoyal12 slidesToScroll: 0 is not supported

[neerajgoyal12]

thanks for quick reply

[celevra]

ok thanks neerajgoyal12 for the template ;-)
here with my settings:
http://jsfiddle.net/koLe0rja/1/

no arrows, not clickable, no center

[kenwheeler]

@celevra, if you have 5 slides, and you show 5 slides, then the small portion should not be a carousel. You should just make a list and on click use slickGoTo. slick reverts to standard display when there isn't anything to slide. In fact, it shouldn't even be sliding, but asNavFor is forcing it's hand.

[kenwheeler]

@celevra @neerajgoyal12 but i digress, if you guys absolutely need this to work like this, which doesn't make sense unless you plan on adding slides to either carousel, look for it in the next release or so.

[celevra]

yes because i want to use it it as a real navigation where i show all possible slides, but i want the active one in the middle, this is not possible with a simple list and slickGoTo.
thank you for your help, i'm looking forward for the next release.

[kenwheeler]

That is absolutely possible with a simple list.

[celevra]

ok, than simply i don't know how to do the sort, can you guide me in the right direction?

[kenwheeler]

You know, @celevra , if you set slidesToShow 3 on that one, and center your text, its basically the same thing in center mode as slidesToShow 5.

[kenwheeler]

http://jsfiddle.net/koLe0rja/3/

[celevra]

in my real script there are only 3 slides, and in your example you can't see the other 2 slides
the user only know that they are there if he clicks it, but the user wants to see all options from the beginning

[kenwheeler]

Then set slidesToShow to 1.

[celevra]

ok
here is a "point" "larger point" and "med point"
http://jsfiddle.net/koLe0rja/4/

i set it to 1 but i only see "point"

[celevra]

ok here is my real-live example:
http://ticker.by.lk/g/100003

there are menu points Play-by-Play, Team-Stats and Boxscore
they are triggering per slickGoTo as workaround, but i want the active one in the middle with slider act as nav

[neerajgoyal12]

@kenwheeler am trying to add slides dynamically(ajax) to the slick and also deleting them dynamically(ajax) while having the uplaod button shift to the end on add or delete. Rails project link for the same sample_aws_s3_uplaod using figaro gem for application.yml file to keep my secrets ... Thanks a ton for accepting it as a feature and bug ...

[kenwheeler]

@neerajgoyal12 It'll be in the next release

[leggomuhgreggo]

Was looking for same feature. Glad to here it's forthcoming. Thanks!

[kenwheeler]

Fixed via #676

[Malin88]

issue form first post returns in version 1.5.8 :/

[cihakm]

Any progress with this bug in v. 1.5.8?

[vipul-bhavsar]

Yes Same issue got open in 1.5.8 :( please fix

[Gunbit]

please fix same issue

[studioraygun]

Subscribed. The reason we need this feature is because we don't know how many slides there will be, because it will be controlled by a CMS. So we set slidesToShow to 5, but if there are 5, the bug occurs.

[primaltalk]

This is a little late to the party, but if you want 5 slides to show out of 5, set slides to show to 3 and center padding equal to the slide width.

[AlexandraKlein]

Great solution, but problem I'm having with center padding is that center mode doesn't begin on the first slide on init. Any suggestions?

[Piotrucci91]

There is an option "initialSlide" which takes integer value (number of slide you want to start on).
Yea the centerpadding is great... managed to do my 3-slide slider :D

I have a strange problem (when inspecting in my browser, cant find reason why it happens, ..)
The Arrows(i mean .slick-next and .slick-before) get transparent background after clicking them (until focusing something else ie. click)
I had to use this to solve it :

.slick-next:focus, .slick-prev:focus
{
    background:black;
}

( I know there must be other way, tho...)

[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.

1. 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.

[karenYerevan]

Erikjhons have you demo for yor changed Slick.js, because for me your changes not work ???

[ghost]

Yes. Please view vivolife.co.uk

[czareknster]

@Erikjhons its works perfectly. Thx.