This article is part of our ongoing Slider Revolution tutorials. You can find all the articles in this series in our Comprehensive Slider Revolution Guide.
Slider Revolution provides a lot of creativity and versatility in terms of style. You can create minimalist, toned sliders or dense multi-layered sliders. The second type is usually more interesting and dynamic. However, if you have a slider with really good images but no additional layers, you can still turn it on. And that’s exactly where slide transitions come into play.
About Slide Transitions
Slider Revolution (which has some excellent options in this section) uses slide transitions to animate slides with background images and several (or no) additional layers. A slide transition actually, effect that appears when one slide moves to make room for another.
These transitions can help you define the rhythm and feel of your sliders, as they can be slow and subtle or fast and bold.
Let’s take a quick look at how you can set up Slider Revolution slide transitions.
First Slide Pass
Slider Revolution offers a separate transition for the first incoming slide and the option to choose different transitions for subsequent slides. This helps to separate the first slide as a kind of introduction. If you choose a “right-to-left” slide motion for your background images, your first slide should have a different transition direction. If you leave the same setting for the first slide, you’ll have a blank page before your first background image slides to the side. For this reason, always use a simple first slide transition. slowly animation. To set this option, go to: Module General Options > General > First Slide and set Different Animation with Open.
In this example, we used the Passepartout Slider homepage from our Yvette WordPress theme and its default values Transition Type, Transition time and for Pass Slot Amount. Of course, you can change them to match your website style. To avoid a long loading time for your first slide image, do not set too high values for the transition time.
Single Swipe Pass
After maintaining your first slide, Single Slide Animations for each background image of your slider. set for the first slide. it will appear when the slide appears a second time (unless you choose a different animation type for the first slide transition, of course).
You can go with the same animation for all slides or set a different type for each. go Slide Options > Animation > Slide Animation and click the big blue button to open different transition animations.
Various transition types are available and you can choose your preferred type and choose the animation from the additional drop-down menu.
We decided and used the same animations for all slides. We chose for the type Swipeand we chose as it seems Swipe Left. The other default options seemed like a good fit, so we left them as is. Slide Over means that your next image will always slide over the previous one, appearing from right to left in our case.
And here are the additional settings for the transition. You can change its speed and smoothing.
After we set everything up, our transitions look like this:
wrap up
Slide transitions represent an important element of any slider, so it’s highly recommended that you consider them well and adjust them to suit your website’s style and atmosphere. As we saw in this post, there are some practices to follow. For example, your first slide should have a different transition effect than the others, and the transition time should not be too long. Slider Revolution offers tons of options to customize this effect, and we recommend experimenting a bit until you get the perfect result.
