Slider Mode slideshow

[Markao17]

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

var sliderVideo = new Glide('.glide', {
  type: 'slideshow'
})

sliderVideo.mount()

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?

[doppl3r]

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'.

[radd2004]

Any update on this? Was there any particular reason why fade was removed from slider?

[jedrzejchalubek]

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.

[Markao17]

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

[eiranix]

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.

[ghost]

Just what I needed. Thanks @eiranix

[eballeste]

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

[Szymon-dziewonski]

@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

[SoyPoloyo]

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