How to make some cool slideshows

With the Slider element we can already make some slideshows. We just need to add a slider and choose the fade animation effect in the Styling options.

Here is a first basic example.

Step 1

Add a slider and choose the same options:

Step 2

Select the slides and add a different background image for each of them:

Then it will look like this:

To add more effects, we need to add some Custom CSS.

To do so, we only need to understand these 2 lines:

#myawesomeslideshow .unslider-fade .unslider-wrap li.unslider-active { }

#myawesomeslideshow .unslider-fade .unslider-wrap li:not(.unslider-active) { }

- The first one is the state of the Slide when it becomes active (when it shows up).
- The second line is when the Slide disappears (fade out).

Step 3

Let's add a simple zoom effect:

#myawesomeslideshow .unslider-fade .unslider-wrap li:not(.unslider-active) {
    animation: 1s zoom_out;
}

@keyframes zoom_out {
  from { transform: scale(1); }
  to   { transform: scale(2); }
}

When the Slide becomes inactive (notice the 'not(.unslider-active)' ), we animate it with a zoom effect (scale(1) to scale(2)).

Let's do another one

#myawesomeslideshow .unslider-fade .unslider-wrap li.unslider-active {
  animation: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) rotate_in;
  transform-origin:right bottom;  
}

#myawesomeslideshow .unslider-fade .unslider-wrap li:not(.unslider-active) {
  animation: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) rotate_out;
  transform-origin:left bottom;
}

@keyframes rotate_in {
  from { transform:  rotate(-90deg); }
  to   { transform: rotate(0); }
}

@keyframes rotate_out {
  from { transform:  rotate(0); }
  to   { transform: rotate(90deg); }
}

So now we have 2 animations. One for the Slide that becomes active (rotate_in), and one for the Slide that becomes inactive (rotate_out).

For the first slider at the top of the page, the structure is a bit different as I wanted to animate each element separately.

So I don't animate the Slides but the Images and the Headings instead, as you can see in the CSS:

.supaslideshow1 .supaslideshow1_img {
  object-fit:cover
}
.supaslideshow1 .unslider-fade .unslider-wrap li.unslider-active .supaslideshow1_img {
    animation: 1s zoomin;
    z-index: 10
}
.supaslideshow1 .unslider-fade .unslider-wrap li:not(.unslider-active) .supaslideshow1_img {
    animation: 1s zoomout;
    z-index: 0
}

.supaslideshow1 .unslider-fade .unslider-wrap li.unslider-active .supaslideshow1_title {
    animation: 1s slidein;
    z-index: 10
}
.supaslideshow1 .unslider-fade .unslider-wrap li:not(.unslider-active) .supaslideshow1_title {
    animation: 1s slideout;
    z-index: 0
}

@keyframes zoomin {
  from { transform: scale(1); }
  to   { transform: rotate(0deg); }
}

@keyframes zoomout {
  from { transform: rotate(0); }
  to   { transform: rotate(20deg) scale(2); }
}

@keyframes slidein {
  from { transform: translatey(100%); }
  to   { transform: translatey(0); }
}

@keyframes slideout {
  from { transform: translatey(0); }
  to   { transform: translatey(-100%); }
}

More slideshow effects are available in my Design Set : https://www.dezign4fun.com/slideshows/