question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS transition doesn't effect on slides' loop

See original GitHub issue

Hi,

I have (right now) 3 slides of the main slider on http://zschocianow.pl/

I am using css’ transform property to get result as current active slide is normal size and slide before and after are only 80% of height: zespol szkol w chocianowie strona internetowa zespolu szkol w chocianowie informacje z zycia szkoly osiagniecia i prace uczniow aktualnosci i wydarzenia oferta edukacyjna plan lekcji galeria zdjec

Problem is that when it switch from last slide to first, there are no transition, just “jump effect”. I don’t know how classes are changed (I think the problem is delay in that action) - in loop, for every call or something else, but I am pretty sure that it could be fixed easy from script/CSS side.

Main slider’s settings:

$('#main-slider').slick({
    infinite: true,
    dots: true,
    autoplay: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerPadding: '100px',
    prevArrow: '<button type="button" class="slick-prev box-shadow">Previous</button>',
    nextArrow: '<button type="button" class="slick-next box-shadow">Next</button>',
    responsive: [
        {
            breakpoint: 700,
            settings: {
                centerMode: false,
            }
        },
        {
            breakpoint: 550,
            settings: {
                dots: false,
                centerMode: false,
            }
        },
    ]
});

My CSS are with vendor prefixes: -webkit, -moz, -ms, -o, but I skipped them below for clean. You could see source code on live.

CSS for each slide is:

#main-slider .slick-slide {
    height: auto;

    transform: scale(1, 0.8);

    transition-property: transform;
}

Inferited transition effect:

    transition: 0.3s linear;

Current slide:

#main-slider .slick-active {
    transform: none;

    position: relative;
    z-index: 2;
}

My browser in Opera Developer 33 (latest Chromium). Note: I just tested it in Opera 12.17 (very old version) and saw that it going back to first slide by scrolling extremaly fast in left. So can I “fix” this bevahiour in that case? Maybe another transition time for last/first slide (done by CSS’ child selector)?

Let me know if I should provide more info.

Thanks in advance for help! Greetings

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:9

github_iconTop GitHub Comments

1reaction
SOTLcommented, Feb 15, 2017

Im not using any IDs whatsoever yet still got this issues. any insights?

0reactions
shaunrootcommented, Feb 21, 2017

I have the same issue as SOTL. It has nothing to do with ID’s. The class that center mode add would work, but center mode is not an option in this case.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS slideshow doesn't work after the first loop - Stack Overflow
I wanted to learn from a tutorial but i messed things up... It seems that some images in the slideshow overlap after the...
Read more >
Looping a CSS Transition | kirupa.com
The reason your transition works is because you swapped the class value on your circle from stateOne to stateTwo when you hovered over...
Read more >
CSS Animations Not Working? Try These Fixes - HubSpot Blog
Learn how to fix common CSS animation error and get your animations looking how you want them.
Read more >
CSS: Using animation for automatic slideshows - W3C
The animation is simple. It just toggles the 'z-index' between 0 (putting the slide in front of the parent container) and -1 (behind...
Read more >
Velocity.js
It is the best of jQuery and CSS transitions combined. ... jQuery without its effects module (see jQuery on GitHub), which Velocity does...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found