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/