Transition Slider – Responsive Image Slider and Video Slider

Descripción

Demo | Example Sliders | Features | Documentation | Support

Overview

Transition Slider is unique innovative image and video slider with seamless transitions and responsive animated layers. Showcase your images and videos in your website across all browsers & devices with this unique and most powerful Slider around. Build any slider without coding! Create beautiful responsive slideshow, image slider, video slider, gallery slider, layer slider with animated layers and effects Slide, Fade, Zoom, Warp, Crossfade, Flash, Twirl, Roll, Stretch.

Templates

Transition Slider comes with professionally designed templates that you can easily modify and create your perfect slider. 11 Free templates are included. Many more templates are available in PRO version.

11 FREE Templates

33 PRO Templates

PRO Version Demo

Upgrade to PRO

Transitions

Bring your website to new level with transition effects only seen in professional videos. Impress visitors with original animations that will catch their attention. Transition Slider is inspired by popular video editing transitions and enables you to use those kind of effects inside your website. Transition include effects like Motion blur, Radial blur, Brightness, and 3D image distortions. Transitions are fully customizable, you can set type, duration, easing, direction, distance and brightness. Each slide can have different transition.

Line transitions – PRO

This set of transitions is available in PRO version

Super easy integration

No technical skills needed, simply choose a slider and insert the shortcode in your page or post.

Animated Layers

Completely new Layer editor gives you ability to design your slides easily by adding animated Text, Image, Button and Video elements, with advanced settings for each element. Each element has In animation, Out animation with customisable duration and delay.

Slider size

Slider can have responsive height (fixed aspect ratio) or fixed height. There is also fullscreen mode which makes the slider always cover entire screen.

Live Preview

As you edit slides in beautiful interface you can watch your changes instantly in live preview, which makes creating slides fast and efficient.

Mobile and Tablet settings – PRO

With mobile and tablet settings you can create fully responsive slider that will look great on all devices. You can have different slider size (portrait on mobile, landscape on desktop and tablet) and change any setting for layer elements (font size, position, spacing)

Lightbox mode – PRO

You can have your Slider in Lightbox mode. Lightbox mode can be engaged through any custom text, which you can customize to fit your website layout, like changing font family, font size, color, etc. This feature is available in PRO version only.
View Lightbox example

iFrame Element – PRO

Transition Slider is now even more flexible with a new feature of HTML source inside slides! You can insert any HTML content inside slides and fully customize it’s size, animation etc. This way you can display any possible webpage you can imagine from the web, inside your slider.

Slider Thumbnails

You can display thumbnail images in your slider. This feature gives you flexibility to enhance user experiance, due to better view of your slider content in advance. Thumbnails are fully customisable so you can easily change thier position (top/right/bottom/left), choose to display them inside slider or outside of slider, you can set any thumbnails size, and even change their color, background and border.

Button Templates

We have created 12 sleek button templates. With one click you can add them to your slide. 5 button templates are included in this version and additional 7 button templates you’ll get in PRO version. Button elements can be customized as well.

Text Templates

We have created 16 best text templates with most appealing fonts. With one click you can add them to your slide. 5 text templates are included in this version and additional 11 text templates you’ll get in PRO version. Still, you can customize your texts manually, without limits.

Google Font

Over 1000+ Google fonts available in slider. Make your web more beautiful, fast, and open through great typography. Google Fonts makes slider and web page run faster by safely caching fonts without compromising users’ privacy or security.

Navigation

10 pre-made navigation arrow styles are included, yet, you can customize navigation elements to perfectly match your website style.

Pagination

Just as navigation arrows, 6 pre-made pagination styles are included, which are fully customisable. Also, you can choose to make them dynamic, or turn them off.

Great UX

Day by day, we are greatly improving user experience by improving Transition Slider’s interface design and usability.

Fully customisable

Transition slider is fully customisable, which means that you have full control over visual content of slider. Each slider element can be customized, from navigation, pagination, sizes, shadows, animations to even adding your custom css as top level of unlimited customisation ability.

Draggable Slides

Transition Slider has now draggable slides, which makes awesome WebGL effects even more attractive. You can drag slides with touch or mouse, in both directions.

Lazy Loading

Slide images, videos and layer elements are only loaded when the relevant slides are displayed (all of the slider’s images are NOT loaded up-front). This way we keep attention to avoid heavy impact on user’s broadband and improve user experience.

High Performance

Slider is rendering only when it is visible in viewport, so you can have multiple full width sliders on the page without problem. This enables you to create rich website with animations, videos and images with high performance.

Parallax effect

With parallax scrolling feature you can create depth and make Slider even more visually superb!

Infinite Looping

First slide is seamlessly displayed after the last slide without any carousel rewind.

Slide Link

Create a full slide link button for any slide within your slider.

Mouse scroll navigation

You can navigate through slides with mouse scroll.

Autoplay

Get benefit from timer driven autoplaying slides so your users get visual representation before the actual interaction with slider.

Gutenberg compatible

Features

• Unique slide transition effects made with WebGL custom shaders
• Customizable transitions – direction, speed, duration, brightness, easing
• 10 different transition effects – slide, roll, zoom, stretch, power zoom, twirl, warp, flash, fade, crossfade
• Responsive size – fixed or responsive height based on width
• Full width, fullscreen, boxed layout
• Animated elements Text, Button, Image, Video
• Visual Layer editor
• Transition In and Out Available for Each Layer
• Image slide
• Video slide
• Navigation Arrows – presets and customisable
• Pagination – presents and customisable
• Lazy loading slides
• Autoplay with timing
• Slider Loop – go from last slide to first
• Draggable slides – transition progress on touch move or click and drag
• Deep linking
• Slide link – entire slide is link
• Switch slides with mouse scroll
• CSS Styles – customize anything with custom css
• 4 Preloader styles
• Parallax

PRO Features

• Lightbox mode
• iFrame element (any HTML source inside slide)
• Mobile and Tablet settings (full responsiveness)
• New set of transitions Line transitions
• Import & export sliders
• +11 pre-made text templates
• +7 pre-made button templates

Compatible Browsers

  • IE10+
  • Firefox
  • Safari
  • Opera
  • Chrome
  • iOS browser
  • Android browser

Documentations

If you have any question about working with «Transition Slider», you can take a look at online documentations.

What our users say

«The support is amazing, this plugin is amazing. I would definitely recommend this plugin to everybody on wordpress. One of the easiest plugin to use and amazing capabilities.» – oesalazar123

«Boom its a WOW! Plugin. quick & lovely support, completely satisfied.» – agentkiller007

«I have used the lite version on two websites. Extremely user-friendly (important consideration for clients) and lightweight plugin. Superb all round.» – alexwent

«The free plugin version of Transition Slider is already feature-rich packed so that you can test out any settings needed. It has more options available for free than I have seen at a different similar slider. Beyond that, it is even easier to use. The only caveat is that the free version is not having settings for mobile devices and I highly recommend purchasing the full version to get all features including fine-grained settings for mobile devices. The pricing is very fair and combating with other plugins that are less feature-rich, less easy to use, and much more expensive.» – yogieanamcara

«It’s a very fine slider with great effects – thanks!» – glaeskewpr

«This slider is loaded with features, and is easy to get going. And the support is absolutely phenomenal!» – stevemullen

«The makers are very responsive and helped me with an issue I was having. Which resulted in a new update that made this slider plugin one of the best out there!» – bluesblue1

Capturas

Bloques

Este plugin proporciona 1 bloque.

  • Transition Slider - Responsive Image Slider and Video Slider

Instalación

Minimum Requirements

  • WordPress 4.6 or greater
  • PHP version 5.4 or greater
  • MySQL version 5.0 or greater

This section describes how to install the plugin and get it working

Automatic installation (easiest way)

To do an automatic install of Transition Slider, log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.

In the search field type «Transition Slider» and click Search Plugins. Once you have found it you can install it by simply clicking «Install Now».

Manual installation

Uploading in WordPress Dashboard

  1. Download transition-slider-lite.zip
  2. Navigate to the ‘Add New’ in the plugins dashboard
  3. Navigate to the ‘Upload’ area
  4. Select transition-slider-lite.zip from your computer
  5. Click ‘Install Now’
  6. Activate the plugin in the Plugin dashboard

Using FTP

  1. Download transition-slider-lite.zip
  2. Extract the transition-slider directory to your computer
  3. Upload the transition-slider directory to the /wp-content/plugins/ directory
  4. Activate the plugin in the Plugin dashboard

The WordPress codex contains instructions on how to install a WordPress plugin.

Updating

You can use automatic update to update the plugin safely.

Preguntas frecuentes

Where can I find Transition Slider documentation and user guides

If you have any question about working with «Transition Slider», you can take a look at online documentations

Reseñas

2 de febrero de 2021
Plugin is very easy to use and runs smoothly. The premium templates are pretty, a few more would be nice. The competitors offer a little more here. (entire websites, blocks and effects) The support reacts promptly and has the necessary competence. I would describe the price-performance ratio as good.
20 de enero de 2021
Очень долго искал плагин, в котором можно добавлять текст к изображениям и что бы была функция автоплея. Очень благодарен разработчикам за плод их трудов.
17 de diciembre de 2020
This Slider is unlike anything else that is available for free at the moment. It even beat out some of the Premium Sliders like Soliloquy. Unreal.
10 de diciembre de 2020
It's a very fine slider with great effects - thanks!
Leer todas las 12 reseñas

Colaboradores y desarrolladores

«Transition Slider – Responsive Image Slider and Video Slider» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

Registro de cambios

Version 2.17.1 / (06.04.2021)

  • [IMPROVEMENT] If the slider name is longer, then in the layer editor it overlaps over the device icon.
  • [BUG] Fixed Copy / paste colors from one element to another element.
  • [BUG] Fixed situations with copy / paste multiple elements on a layer.
  • [BUG] Fixed button templates, now is possible to remove and change the border size.
  • [BUG] Fixed the situation when the preview is opened while the layer editor is open, and when the forward / backward slides are changed with the arrows, now only the slides in the preview are changed, while in the layer editor the slides are not changed.
  • [BUG] Right-clicking on the layer editor does not accidentally move absolutely positioned elements.
  • [BUG] Copy / paste is again possible by right-clicking and selecting from the layer menu.
  • [BUG] Effect9 or typing effect supports multiple words again (writing and deleting).
  • [BUG] Effect4 corrected text position when used on a text block element.
  • [BUG] Fade animation is completely removed from the layer at the end of the animation (100% translate)

Version 2.16.0 / (26.02.2021)

  • [FEATURE] Added new slider mode «webgl» or «css». If you don’t want advanced transitions between slides, you can now use the «css» type of slider, which will work faster because it doesn’t load the additional scripts needed for advanced transitions.
  • [FEATURE] Added option for image elements, from now on you can put an onClick action of type «url» and set the URL you want the image to open when clicked on it.
  • [FEATURE] Size options now support separate settings for tablet, mobile and desktop
  • [BUG] Fixed Transition selector that in some cases did not change to the selected transition.
  • [BUG] Fixed issue where sometimes the background slide could not be uploaded unless the user had small image generation enabled (Settings -> Media -> Media Settings). It is now possible to upload regardless of this option.
  • [BUG] Fixed predefined transitions «blur2» and «blur3»

Version 2.15.1 / (10.02.2021)

  • [BUG] Fixed issue for users who had Media generation turned off (Settings -> Media) the plugin crashed when changing the background image of the slider.

Version 2.15.0 / (02.02.2021)

  • [FEATURE] A new option that allows a true responsive and fullscreen slider regardless of the width and height of the container of the template in which it is located. The options are forceFullscreen and forceResponsive.
  • [FEATURE] Added new transition SpinEffect + RadialBlurShader.
  • [FEATURE] From now on slider options can also be specially tuned for mobile, tablet and desktop.
  • [FEATURE] We added device buttons (mobile, tablet and desktop) to Preview Slider.
  • [FEATURE] Due to the expansion of text effects, we were forced to rearrange the typing effect that you can currently find under Effect 9. You can also find an additional 14 new effects that are perfect for text elements.
  • [FEATURE] Start and End animations, Transition animation selectors are now visual with live examples.
  • [FEATURE] Video background autoplay can now be turned on and off.
  • [IMPROVEMENT] Font menu in Layer Editor improved, from now on you can visually see what the font you want to choose looks like.
  • [IMPROVEMENT] Fixed and adjusted templates to look good on mobile and tablet.
  • [IMPROVEMENT] From now on, Custom CSS options are also changed live within the Layer Editor.
  • [IMPROVEMENT] You no longer need to worry about which protocol the slider assemblies are on (http / https) and which protocol the slider is displayed on, CORS policy is fixed in this version.
  • [BUG] We fixed the Duplicate button in the Layer Editor in the menu when the user right-clicks the mouse.
  • [BUG] Text element font size issues, sometimes to change the font size, the font is not well displayed on the slider.
  • [BUG] Text element margin issue while using external WP themes like Astra.
  • [BUG] Firefox issue could not delete already entered values.
  • [BUG] Layer editor – The heading element had additional margins for larger font sizes.
  • [BUG] Elements that had an absolute position could not move the position with arrows or drag.
  • [BUG] In the Layer editor, the left menu sometimes had wrong categories displayed for certain items.
  • [BUG] Sometimes the button on the last layer took over the click events on all the previous buttons.

Version 2.14.1 / (10.12.2020)

  • [IMPROVEMENT] Huge improvements in renderer, transitions now are much faster and optimized
  • [BUG] Fixed WordPress 5.6 update border grid over slider
  • [BUG] Fixed issue with Line transition showing wrong backgrounds
  • [BUG] Fixed flickering slider on slide change
  • [BUG] Fixed issue where some WordPress themes added extra margin to slide elements

Version 2.14.0 / (25.11.2020)

  • [FEATURE] Very big change for the elements on the layer, we made a completely different and fast implementation that will soon bring something very big!
  • [FEATURE] We’ve visually changed the Dashboard to have even more visibility and space to create your sliders
  • [FEATURE] Slide settings and All elements are switched to heading in the left menu inside the Layer editor. To be always easily accessible
  • [FEATURE] We changed the Text element to Text Editor where you now have a small editor where you can add various text styles
  • [FEATURE] Added new element «heading» with default tag h2
  • [FEATURE] In the layer Editor under the Transition category, we added a small question mark for each option on hover you get an explanation of what that option does and what its range is
  • [FEATURE] Added option «Reset video on slide change» – resetVideos
  • [FEATURE] Thumbnails assets added in all templates
  • [FEATURE] Added lightbox and thumbnails templates as an example
  • [FEATURE] Added 6 new simple templates
  • [IMPROVEMENT] Huge transition improvements, from now on all transitions have higher FPS with better blur
  • [IMPROVEMENT] Improved small bugs in some templates
  • [IMPROVEMENT] Some templates have improved transitions
  • [IMPROVEMENT] Moving the button in the Layer editor now works smoothly
  • [IMPROVEMENT] The iFrame can be moved normally through the Layer editor like other elements
  • [IMPROVEMENT] Position of save message inside Dashboard is fixed
  • [IMPROVEMENT] Change on global variables to avoid collision with other global variables of other plugins
  • [IMPROVEMENT] Significant acceleration at fast element selection changes in Layer editors
  • [BUG] Fixed that multiple sliders on one page can work with thumbnails included
  • [BUG] Fixed a situation where the selected element was inside the Layer editor and when some input was clicked and the arrows on the keyboard were clicked the selected element was moving
  • [BUG] In absolute element movement, the position elements x and y were large decimal numbers
  • [BUG] Fixed input fields for Safari
  • [BUG] Fixed copying shortcodes on some browsers
  • [DOCUMENTATION] Video tutorial – How to use General Slider options

Version 2.13.0 / (04.11.2020)

  • [FEATURE] RESET VIDEO PLAYBACK on slide change
  • [FEATURE] NEW SLIDER MODE: On click open slider in lightbox
  • [FEATURE] NEW IMAGE AND VIDEO FILE SUPPORT: Video («.mp4», «.m4a», «.m4p», «.m4b», «.m4r», «.m4v», «.webm», «.ogg») | Image («.jpg», «.jpeg», «.png», «.bmp», «.webp»)
  • [IMPROVEMENT] Layer editor significant speed improvement
  • [IMPROVEMENT] Shaders and rendering improved and faster
  • [BUG] Rendering transitions on tab change
  • [BUG] Resize texture size fix

Version 2.12.1 / (21.10.2020)

  • [IMPROVEMENT] Shortcode «Copy» button is working on all browsers, also manual select is available
  • [BUG] Multiple sliders render fix
  • [BUG] Fixed issue with global variables and conflicts with some plugins

Version 2.12.0 / (20.10.2020)

  • [FEATURE] Added more options for slider thumbnails
  • [FEATURE] Slider options now have unit dropdown menu px,%
  • [FEATURE] Added BUY PRO page where you can see the differences between the FREE and PRO version, and which additional features are included in the PRO version
  • [FEATURE] Implemented text style templates
  • [IMPROVEMENT] We replaced the color picker with better, faster and stronger options
  • [IMPROVEMENT] More precise relative / absolute positions for elements
  • [IMPROVEMENT] Accelerated slider loading
  • [IMPROVEMENT] Slider shadow effects now have a visual selector
  • [IMPROVEMENT] Elements animations reorganized
  • [IMPROVEMENT] Each layer element has for a particular option an adequate unit in the dropdown menu
  • [IMPROVEMENT] «Save» and «Back» buttons added in Layer editor to reduce confusion when closing Layer editor
  • [IMPROVEMENT] If the shortcode cannot be copied via the COPY button, it is now possible to manually select the text of the shortcode

Version 2.11.0 / (28.09.2020)

  • [FEATURE] Thumbnails are added: Ability to turn on thumbnails in all positions (up, down, left, right)
  • [FEATURE] 1 New «Line» transitions, 10 more in PRO version
  • [FEATURE] In the layer editor the options have a dropdown menu (px,%)
  • [FEATURE] Added new Premium Template – Travel Adventure
  • [FEATURE] Added new Premium Template – Photograph
  • [FEATURE] Added new Premium Template – Business Corporate
  • [FEATURE] Added new Premium Template – Agency theme
  • [FEATURE] Added new Premium Template – Spa
  • [FEATURE] Added new Premium Template – Clothing Collection Shop
  • [IMPROVEMENT] Refactoring template settings, moving empty options
  • [IMPROVEMENT] Organization in Layer Editor, grouping options
  • [BUG] Fixed an issue with the stopOnLastSlide option when the first slide was attempted to move to the left the image was missing
  • [BUG] The trackpad scroll skipped 2 slides

Version 2.9.0 / (01.09.2020)

  • [FEATURE] Added new Premium Template – Gym
  • [FEATURE] Added new Premium Template – Car 2
  • [BUG] Fixed all issues related with new WordPress 5.5 update

Version 2.8.0 / (23.07.2020)

  • Added new Premium Template – Fashion
  • Added on click lightbox feature for image and video elements on slide
  • Corssfade effect with new directions
  • Layer editor – Button template now is applying correct font family
  • All preloader styles are in the center
  • Fixed issue with shadow effect under slider
  • Resolved issues with parallax
  • Export sliders JSON is much cleaner, removed unused properties

Version 2.7.0 / (16.07.2020)

  • Added new Premium Template – Sport news
  • Added letter spacing property in layer editor
  • Added preview button inside slider templates thumbnails
  • Font family and font weights are now visible on change inside layer editor
  • Sliders dashboard – preview slider inside thumbnail is now working for multiple slider previews

Version 2.6.3 / (02.07.2020)

  • Fix for delete element inside layer editor

Version 2.6.0 / (23.06.2020)

  • Mouse wheel slider navigation
  • New preloader styles
  • New implementation for layer elements style, faster and more compatible with custom templates
  • Layer fixes and improvements
  • Layer editor fixes and improvements
  • Templates updated

Version 2.5.0 / (28.04.2020)

  • Removed watermark
  • New transition effects – Slide
  • All layer elements included – text, button, image, video
  • 5 FREE templates included
  • Improved transition blur and performance

Version 2.1.1 / (11.07.2019)

  • Fixed Gutenberg block

Version 2.1.0 / (10.07.2019)

  • Fixed many issues with layers, elements positioning, loading…
  • smoother transitions
  • Finally! SLIDER TEMPLATES are here!
  • NEW Slider editor – redesign with improvement:
  • Slide settings: new feature added «Full slide link»
  • A layers popup window with copy feature also draggable layer items to arrange which item is under or above
  • Move items on a layer with a mouse or keyboard. Hold SHIFT + arrows to move an element by 10 pixels.
  • Right-click on an element and discover a new menu with Delete, Copy, Paste and Duplicate.
  • Switch between slides with left/right arrows
  • Copy/Paste elements between slides (Hold Shift and click on multiple elements right-click and select Copy, move to next slide and Paste selected elements there)
  • Copy/Paste elements with keyboard (Ctrl+C / Ctrl+V for Windows and Cmd+C / Cmd+V for Mac users)
  • Each element is extended with many new settings and hover parameters
  • Layer size option for mobile and tablet
  • NEW Dashboard – redesign with improvement:
  • Select multiple sliders or only one for Export feature
  • The added dropdown menu to select all or none sliders
  • Live preview slider before saving
  • New fullscreen slider preview
  • Slider settings:
  • Under the «size» tab find new responsive parameters (responsive ratio for all devices: desktop, tablet, and mobile)
  • Define breakpoint width for devices (Tablet screen width and mobile screen width)
  • Loading with change text and background color feature
  • transition progress between slides on touch move/drag
  • GUTENBERG Supported
  • Fixed shortcode name parameter
  • Added new shortcode parameters
  • Fixed visual issue with video slide buttons
  • TEMPLATES are included!
  • Fixed visual issue with Brightness Effect
  • Fixed copy/paste multiple elements on layer
  • Fixed move issue for multiple selected elements
  • Fixed switching slides with arrows inside layer editor
  • Fixed delete content text refresh in Text element

Version 1.0.0 / (01.06.2019)

  • initial release