CSS transition doesn't effect on slides' loop
See original GitHub issueHi,
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:
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:
- Created 8 years ago
- Comments:9
Top GitHub Comments
Im not using any IDs whatsoever yet still got this issues. any insights?
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.