You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Try to improve this code that seems to work well but has a sudden jump without a fade from the last slide to the first one. In one attempt, I managed to make it work correctly by modifying the CSS of the troublesome slide using the 'move' event, but it only worked if the slide had 3 elements. Unfortunately, I tried to make it work with more than 3, but I couldn't, and after so many modifications, I lost what I initially achieved :@
What I had changed was the line from 'first-of-type' to 'last-of-type,' and then, with the 'move' event, I modified the last slide to have opacity 0 again, and in the 'else' part, it returned to the value 1
var splide = new Splide( '.hero-slider', {
type: 'fade',
rewind: true,
autoplay: true,
interval: 4200,
speed: 3000,
arrows: false,
pagination: false,
} );
splide.on( 'move', function (e) {
console.log('e', e); // slide active ?
// if (slide active !== the first) {
// $(get the last slide).change css to opacity 0
// else {
// come back to opacity 1
// }
})
splide.mount();
According to my logic, it should be something like this, but I can't seem to achieve the expected effect. The last slide tends to overlap with the ones in the middle during the transition.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Try to improve this code that seems to work well but has a sudden jump without a fade from the last slide to the first one. In one attempt, I managed to make it work correctly by modifying the CSS of the troublesome slide using the 'move' event, but it only worked if the slide had 3 elements. Unfortunately, I tried to make it work with more than 3, but I couldn't, and after so many modifications, I lost what I initially achieved :@
What I had changed was the line from 'first-of-type' to 'last-of-type,' and then, with the 'move' event, I modified the last slide to have opacity 0 again, and in the 'else' part, it returned to the value 1
According to my logic, it should be something like this, but I can't seem to achieve the expected effect. The last slide tends to overlap with the ones in the middle during the transition.
Beta Was this translation helpful? Give feedback.
All reactions