{"id":8841,"date":"2020-06-27T15:00:38","date_gmt":"2020-06-27T13:00:38","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8841"},"modified":"2022-05-10T15:59:22","modified_gmt":"2022-05-10T13:59:22","slug":"slider-revolution-slide-transitions","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-slide-transitions\/","title":{"rendered":"How to Add Slide Transitions to Slider Revolution"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Slider Revolution<\/a> allows for a lot of creativity and versatility in terms of style. You can create minimalistic, toned-down sliders or busy ones with a lot of layers. The second type is usually more interesting and dynamic. But if you have a slider made up of really good images but no additional layers, you can still make it pop. And that\u2019s precisely where slide transitions come in<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

About Slide Transitions<\/h2>\n

[\/vc_column_text][vc_column_text]In Slider Revolution (which has some excellent options in this department) slide transitions are used to animate slides consisting of background images and a few (or no) additional layers. A slide transition is, in fact, the effect that appears when one slide moves to make room for the next one<\/strong>. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]These transitions can help you define the rhythm and the feel of your sliders, as they can be slow and subtle or fast and bold. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Let\u2019s take a quick look at how you can set up Slider Revolution slide transitions. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

First Slide Transition<\/h2>\n

[\/vc_column_text][vc_column_text]Slider Revolution gives us an option to choose a separate transition for the first slide that comes in, and different ones for the slides that follow. This helps set the first slide apart as a sort of introduction. If you choose a \u201cright to left\u201d slide motion for your background images, then your first slide should have a different transition direction. If you leave the same setting for the first slide, you will have a blank page before your first background image slides in from the side. So, for the first slide transition, it\u2019s always recommended to use a simple Fade In<\/strong><\/em> animation. To set this option, go to Module General Options > General > First Slide<\/strong><\/em> and set the Diff Anim<\/strong> to On<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"First <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In this example, we used the Passepartout Slider home<\/a> from our Yvette WordPress theme<\/a>, leaving its default values for Transition Type<\/strong><\/em>, Transition Duration<\/strong><\/em> and for Transition Slot Amount<\/strong><\/em>. You can, of course, change these to fit your website style. Just don\u2019t set too high values for the transition duration, to avoid long loading time for your first slide image.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Single Slide Transition<\/h2>\n

[\/vc_column_text][vc_column_text]After you have taken care of your first slide, you can make Single Slide Animations<\/strong><\/em> for every single background image of your slider. The one that you set for the first slide is going to appear the second time the slide shows up<\/strong> (in case, of course, you have chosen a different type of animation for the first slide transition).[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You can go with the same animation for all slides, or you can set a different kind for each. Go to Slide Options > Animation > Slide Animation<\/strong><\/em> and click on the big blue button to open different transition animations.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Single <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Various transition types are available, and you can select your preferred type and choose the animation from the additional dropdown.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Various <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]We\u2019ve decided to go with the same animations for all slides, and this is what we used. For the type, we opted for Slide Over<\/strong><\/em>, and for the way it appears we chose Slide Over To Left<\/strong><\/em>. Its other default options seemed like a good fit, so we left those as they were. Slide Over means that your next image will always slide over the previous one, and in our case, it will appear from right to left.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Slide <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And here are the additional settings for the transition. You can change its speed and easings.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Additional <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After setting everything up, his is what our transitions look like:[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Yvette <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”90px”][vc_widget_sidebar sidebar_id=”slider-revolution-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Wrapping It Up<\/h2>\n

[\/vc_column_text][vc_column_text]Slide transitions represent an important element of every slider, so it\u2019s highly recommended to think them through well and set them to fit your website style and atmosphere. As we saw in this article, there are certain practices that should be observed. For instance, your first slide should have a different transition effect compared to the rest, and the duration of the transition shouldn\u2019t be too long. Slider Revolution offers tons of options for customizing this effect, and we recommend you experiment with them a bit until you get the perfect result. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you, for whatever reason, don\u2019t wish to use Slider Revolution, there are some excellent alternatives, such as the Qi Addons for Elementor<\/a> plugin. This versatile collection of widgets includes several slider widgets that come with interesting transition effects, such as the Divided Slider Diverge<\/a>, Animated Device Slider<\/a> or Divided Slider Reveal<\/a>.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Slider Revolution slide transitions are very important as they set the dynamics and the tone of your sliders. Learn how to set them up just right. <\/p>\n","protected":false},"author":6,"featured_media":8847,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8841","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-slider-revolution","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8841"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8841\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8847"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}