CODEWITHSUNDEEP
jquery.netcarouselslick.js
shanshan
shanshan

Reputation: 33

Slick.js autoplay carousel bounces the last slide, then bounces back to the correct slide

I am using slick.js carousel with autoplay configuration in my .Net site. On the last slide, it bounces to the previous slide for about a second. Afterwards, it bounces right back to the correct slide.

Preconditions: All files and libraries are included where they should be according to Slick.js and other q&a's in this site

What was checked:

Results: Only when autoplaySpeed is short(1000) - it bounces front and back with no visible systematization

Markup:

<div class="homeCarousel"> 
    <div> 
    <a href="/Article/QA%20Article%20friendly%20name%20">
<img alt="First image Main Ban\dsvfner " data-alt-source="homepage/fbBg.jpg?v=0" onerror="javascript:common.imageLink.replaceSourceOnError()" src="http://az742468.vo.msecnd.net/images/homepage/fbBg.jpg?v=0">
</img>
</a> 

    </div> 
    <div> 
    <a href="/Article/UFO%20Kfir"><img alt="Third image Main Banner " src="http://az742468.vo.msecnd.net/images/homepage/Kids_main_mnn_MNN.jpg?v=0">
</img>
</a> 

    </div> 
    <div> 
    <a href="/Article/acdascd"><img alt="Fifth image Main Banner " src="http://az742468.vo.msecnd.net/images/homepage/Fathers_day_2015_main_mnn1.jpg?v=0">
</img>
</a> 
    </div> 
    </div>

JS (in another file, bundle):

   $(document).ready(function() {
        homeCarousel.init();
    });

    homeCarousel.init = function () {
        if ($('.homeCarousel')) {
            $('.homeCarousel').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2500,
                infinite: true,
                pauseOnHover: true
            });
        }
    };

Upvotes: 2

Views: 1793

Answers (2)

shanshan
shanshan

Reputation: 33

The problem was a css class selector capturing all transitions (*). making it more specific fixed it.

Upvotes: 0

TGN12
TGN12

Reputation: 133

This Could happen if you set transition on the slick element so when slick tries to show the correct slide your transition set is interfering.

I would look for a "transition: XXs" that is not related to slick

Upvotes: 1

Related Questions