afterChange not firing when number of slides is less than slidesToShow

Look at this jsfiddle. I would think that even if the number of slides is less than slides to show, with centermode enabled, clicking on one of the slides would activate it, cause the afterChange event to occur if it was a change, and center the slide. With this sort of initialization:

 $('.single-carousel').on('afterChange', function(slick, slide){
            console.log("changing index");
            // left
        });
        $('.single-carousel').slick({
            centerMode: true,
           centerPadding: '60px',
            slidesToShow: 3,
            dots: true,
            focusOnSelect: true,
            infinite: false,
            responsive: [
                {
                    breakpoint: 2140,
                    settings: {
                        arrows: true,
                        centerMode: true,
                        centerPadding: '40px',
                        slidesToShow: 3
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        arrows: true,
                        centerMode: true,
                        centerPadding: '40px',
                        slidesToShow: 3
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        arrows: false,
                        centerMode: true,
                        centerPadding: '40px',
                        slidesToShow: 1
                    }
                }
            ]
        });

I do not see the desired behavior. Am I doing something incorrectly or is this a bug? When I inspect which slide is active, either via the classes on the slide itself or by observing the currentSlide property, the active index is changing. Why isn’t the afterChange event firing in the second case?

[leggomuhgreggo]

@henryw14 I think this is resolved now, but definitely holler back if I’m missing something.

@robsilva no longer use that method for events. It’d be: $('#questions').on('afterChange', function(){ ...code... })

[cameroncowden]

• 1 for this issue. Found a workaround.

My setup was slightly different, essentially needed to have 1 slider (in a modal) that would show different information depending on which product was being “quick viewed”. The slider could contain between 4-20 slides. We want to show 4 at a time (always).

If there were 4 slides exactly, and slidesToShow = 4, then neither beforeChange or afterChange events are fired. Class .slick-current moves around appropriately, though. Worth noting that in this setup, there is no desired movement in the slider (for this edge case only).

Workaround was to bind event listeners on the inner items themselves from within an init listener. The init Listener fires every time the modal is opened (slick unslicked, slides wiped, slides added, reslicked), and then spins out listeners for those particular slides (which are purged when modal is closed).

$('#qv-swatches').on('init', function(event,slick){
        	console.log(slick);
        	$('#qv-swatches').resize(); //to correct display issue
        
        	var rad = document.qvswatches.selectprint;
            var prev = null;
            for(var i = 0; i < rad.length; i++) {
                rad[i].onclick = function(event) {
                  	event.stopPropagation();
                    (prev)? console.log("no longer showing " + prev.value):null;
                    if(this !== prev) {
                        prev = this;
                    }
                    console.log("now showing " + this.value)
                    current_print = this.value;
                  	getPrint(current_print);
                };
            }
        });