Slider Mode slideshow

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?

[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

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