Open Markao17 opened 6 years ago
I searched v2.0.0+ and found 'slideshow' within the source (not sure if it was ever working). The latest version (v3.0.0+) seems to lost the support for 'slideshow'.
Any update on this? Was there any particular reason why fade was removed from slider?
I searched v2.0.0+ and found 'slideshow' within the source (not sure if it was ever working). The latest version (v3.0.0+) seems to lost the support for 'slideshow'.
That's true. v2 had this kind of transitions. It was removed in v3 as it dropped jQuery dependency and was entirely rewriten in vanilla js.
This functinality is a great case for additional extension, but for now there is no slideshow
effect in v3.
I searched v2.0.0+ and found 'slideshow' within the source (not sure if it was ever working). The latest version (v3.0.0+) seems to lost the support for 'slideshow'.
That's true. v2 had this kind of transitions. It was removed in v3 as it dropped jQuery dependency and was entirely rewriten in vanilla js.
This functinality is a great case for additional extension, but for now there is no
slideshow
effect in v3.
Is there any roadmap for this? As for now i'll sticky with swiper (i'd prefer no to tho) as it fills all my requirements
One way to get a fade type effect is to use some CSS overrides:
.glide__slides {transform:none !important; width:auto !important; display:block;}
.glide__slide {position:absolute; left:0; top:0; opacity:0; transition:opacity 1s;}
.glide__slide:first-child {position:relative;}
.glide__slide--active {z-index:1; opacity:1;}
This assumes all slides are the same height or less than the first one. If they aren't you'd need to set the height with js to the tallest.
Just what I needed. Thanks @eiranix
here is an improved implementation to @eiranix's solution, where, like in his solution, you stack all slides on top of each other but instead of using position: absolute
you use a 1x1 css grid and assign all slides to that same template area. this way you get no weird cropping issues when content is not equal in height
.glide__slides {
transform:none !important;
width:auto !important;
display: grid;
grid-template-areas: 'slide'; //create a 1x1 grid where the single cell is called slide
}
.glide__slide {
position: relative;
opacity: 0;
transition: opacity 0.5s ease;
grid-area: slide; //assign all child slides to the cell
}
.glide__slide--active {
z-index:1;
opacity:1;
}
css-grids is the future
@eiranix thanks for your solution, however for other people please keep in mind there is transition on slider so just set up in glide options animationDuration: 0
here is an improved implementation to @eiranix's solution, where, like in his solution, you stack all slides on top of each other but instead of using
position: absolute
you use a 1x1 css grid and assign all slides to that same template area. this way you get no weird cropping issues when content is not equal in height.glide__slides { transform:none !important; width:auto !important; display: grid; grid-template-areas: 'slide'; //create a 1x1 grid where the single cell is called slide } .glide__slide { position: relative; opacity: 0; transition: opacity 0.5s ease; grid-area: slide; //assign all child slides to the cell } .glide__slide--active { z-index:1; opacity:1; }
css-grids is the future
Awesome, thanks you really much for the solution
Hi there, Was using GlideJS as it has a feature i loved, the peek values. And then i came across a requirement on a second slider for my website where i need the slideshow effect. I've tried just a simple slider with
and nothing different was achieved.
I expected the slideshow (fade) effect but instead got the regular carousel mode. I got glide.min.js, glide.core.css and glide.theme.css all set.
Can you please give me some directions?