Looking for a great free slider for your new website? You have visited WordPress.org and found surely the most popular and most respected MetaSlider. But have you ever wondered if it’s really the best solution for your WordPress website? MetaSlider vs Transition Slider comparison will help you to find out.
Interestingly, the Transition Slider, which recently appeared on WordPress.org, proved to be very lightweight, fast with many features. Of course, since it is not long on the scene with the greats a small population uses it. But that’s why this small amount of active installations is very satisfying and they rated it with a high 5 stars.
But I wondered what was so good about MetaSlider, that people preferred it more than the Transition Slider, which is full of features.
I’ve never used MetaSlider, but it’s time to give it a try and find out the differences and its qualities.
In this test, I will test free versions of both plugins MetaSlider and Transition Slider, we will test them side-by-side in their features, price, and performance. Also in the last test, I will try to make the same slider in MetaSlider and Transition Slider, and compare the interface, features, simplicity, and quality.
Jump quickly to the comparison that interests you:
Features
Pricing
Comparison of Project
Creating a Slider with Transition Slider
Creating a Slider with MetaSlider
Performance Test
Conclusion & Results
⚙️ Features
In terms of feature, MetaSlider and Transition Slider offer many different ones in the FREE version. Let’s look at a side-by-side comparison:
| MetaSlider | Transition Slider | |
|---|---|---|
|
Image slides |
✅ |
✅ |
|
Video slides |
❌ |
✅ |
|
Custom video controls |
❌ |
✅ |
|
Parallax |
❌ |
✅ |
|
Built-in on click lightbox |
❌ |
✅ |
|
Animated layer slides |
❌ |
✅ |
|
HTML overlay slides |
❌ |
✅ |
|
Slider themes |
✅ |
✅ |
|
Thumbnail navigation |
❌ |
✅ |
|
WebGL animations |
❌ |
✅ |
|
Gutenberg supported |
✅ |
✅ |
|
Priority Support |
❌ |
✅ |
In this part of the text I want to say a little more about the comparison and the table. I’ve noticed that MetaSlider doesn’t have easy options for size types. By slider sizes I mean block, hero or fullscreen. There are options for a block slider, as well as for a 100% width slider, so with these two combinations you can get a hero type slider, but there is no possibility for a fullscreen slider. Transition Slider offers all three options that are easy to set up.
Example of size options in MetaSlider:
Example of size options in TransitionSlider:
Later while doing the demo slider example I noticed that I would not be able to make a real comparison because there are no layers in the free version of MetaSlider. So free MetaSlider can only create a basic slider with images.
This situation sets MetaSlider very limited compared to the capabilities on the Transition Slider offered by the layer editor.
As you will see later in the comparison project, there are so many things and options you can achieve with Transition Slider, and with that you can make beautiful sliders without feeling like you have to pay or upgrade a plugin just to have features like layers or WebGL transitions.
🪙 Pricing
Both plugins are available for download for free from the WordPress plugin repository. But if you are missing something or want to try PRO features, here is what you can expect after buying.
MetaSlider
After upgrading MetaSlider to the PRO version, you will receive support for the following features:
- Video slides
- YouTube and Vimeo slides
- Animated layer slides
- HTML overlay slides
- Thumbnail navigation
- Post Feed Slides
- Custom themes
- Scheduled sliders
- Priority support
There are five different pricing plans in addition to the free option:
| 1-2 site licence | 5 site licence | 20 site licence | Unlimited site licence |
|---|---|---|---|
|
$39 |
$59 |
$89 |
$149 |
If you’re interested in upgrading from the free version, you can try MetaSlider risk-free thanks to a 30-day money back guarantee.
Transition Slider
The free version of Transition Slider is one of the best-featured plugins I’ve come across on the WordPress repository.
In the paid version we did not want to hide some necessary features, but in the PRO version we added only those options that will be needed by really advanced users:
- All premium templates
- All WebGL slides transitions
- Import ↔ Export sliders
- Tablet & Mobile layer options
- Lifetime updates
| Regular * | Extended * |
|---|---|
|
$27 |
$99 |
* If your end product including the item is going to be free to the end user then a Regular License is what you need. An Extended License is required if the end user must pay to use the end product.
What I noticed using the Transition Slider free version is that I didn’t feel every now and then that I had to buy the Pro version like this is an example in many other free plugins. Instead, the plugin just shows in the upper right corner a “Go Pro Version!” link on the Dashboard page. It does not interfere with work and is always there accessible if you decide to upgrade to Pro very simply click it.
🤼♂️ Comparison of Project
The best way to compare two slider plugins is to make two identical sliders in each of them. To do this I did a little research on what would be the best and easiest to put together in both plugins.
Netflix Slider Project
For the project we will make a simple Netflix slider:
A very simple slider with three slides that will have different backgrounds, texts, buttons … While testing the plugins, I realized that I must not overdo it with the features since I am limited by MetaSlider and what it offers in the free version.
So let’s go …
🌅 Creating a Slider with Transition Slider
The first thing I did was type in the “Transition Slider” plugin search engine, install it and activate it.
After activating the plugin, the item “Transition Slider” will appear in the left menu, which you need to click to access the Transition Slider dashboard.
Once you’re in the dashboard, you can see a nicely organized and marked interface so there’s no confusion as to how to get started. If you want to make a new slider from scratch, just click “New Slider”, and on the other hand if you have no idea how to design your first slider just click “Slider Templates” and choose one of the Premium Sliders we pre-designed for you.
I clicked “New Slider” to start creating a Netflix slider, a page from the newly created slider opened. On this page we have a big “Add new slide” button, I clicked on it and a Media Library popped up where I can select all the background images for all three slides.
When I loaded all three background images for our slides a dashboard appeared in which I saw the created slides. Below the slides, settings from our slider have appeared, but we’ll talk about them later.
Now to add elements (text, buttons, images…) I have to edit the first slide. I crossed the mouse over the slide first and clicked “Edit,” then a Layer editor opened in which I could add elements to the slide.
I clicked on the Layers tab to see all the elements that can be added to the slide.
The editor looks very simple and organized. The menu with the icons on the left in itself sufficiently describes its meaning.
The background is already set in place, the only thing missing to add is text and a button. Clicking on “Text” shows the text element on the slider, in the options I chose the “Roboto” font that most closely to the Netflix font, I adjusted the block width, font size and we got a pretty similar slider that we wanted to make in this project.
Next, I added a button to the slide by clicking the button element in the sidebar. As soon as the button is added, options open in which I have selected the red color and size of the button to make it look like a Netflix button.
And here it is, the first slide is done !!! This was really simple and only lasted 5 minutes, I don’t believe this slide would have lasted a bit longer if I had used the Transition Slider for the first time.
I’m done creating the first slide and I’m free to close the Edit slide by clicking the X close button. When I exited the Slide Editor I clicked on Save to save the slider I had assembled. Also what would be nice to add is a background overlay because the Netflix project I’m working on has a bit of black overlay over the background.
As for the background overlay, I will easily add it, in the options below I selected General and set the option “Overlay color (between layer and background)” to the value “rgba (0,0,0,0.7)“. To check if I’m happy with what I’ve done, I’ll just click the Preview button, if that’s it I’ll click the Save button to save the slider.
This is what I have done so far on the Netflix Slider.
I’m going to continue to put together the other two slides, so as not to bother too much about the design, I’ll just copy the elements I’ll use. Here’s how I did it, opened the first slide by clicking “Edit”, “Edit Slide” opened. Clicked on the first text, then on the keyboard I held the “Shift” key so I could further select more elements, clicked on two more texts below. When I selected everything to copy I pressed “Command + C” (Mac users) or “Ctrl + C” (PC users). Went to Next Slide and pressed “Command + V” (Mac users) or “Ctrl + V” (PC users) to paste the elements. You may want to change the order of the texts simply by dragging the item up or down in the Layers menu. It couldn’t be simpler than that.
Now I’m just replacing the content of the texts, and after that I will move on to the most interesting and strongest feature of the Transition Slider … WebGL animations between slides!
The most important and special feature that Transition Slider offers unlike all other sliders is WebGL transitions between slides. The free version offers 10 different transitions that you can edit and combine yourself to create various new transition combinations. You actually have an infinite number of transitions between slides.
An example only from some of slides WebGL transitions in TransitionSlider:
ROLL
ZOOM
WARP
TWIRL
You will also see how we can easily change the animations of each element (text and buttons).
Let’s change the transitions between slides first. We click on the “Edit” slide where we want to change the transition and under the “Slide” tab we open “Transition”, there you can find the whole list of transitions and various combinations that you can compose yourself.
In this example, I chose a Power zoom transition with an In direction and duration of 1500ms.
I repeated this on all the slides as the main transition for the slider.
We will now go through briefly how we can easily change the animation of the elements and what animations Transition Slider offers. Even in the free version, Transition Slider also offers a Typing type of animation for text elements, which is really a rarity to find in plugins in the free version.
I decided as a last step to adjust the navigation arrows to look exactly like on our Netflix slider. Under the slider options, I clicked on “Navigation” and selected “Style” which exactly matches what we need.
After that we press “Save” and “Preview” to see what our final Netflix Slider looks like.
I’m pretty happy with the result. It looks great and, more importantly, it was really easy to put together. I didn’t run into any problems at all using Transition Slider.
Now, let’s move on to creating the same slider with MetaSlider…
🏜 Creating a Slider with MetaSlider
Like the free version of Transition Slider, I searched for the plugin in the WordPress repository, installed and activated it. After activation, the MetaSlider item appeared in the sidebar. The dashboard of the plugin is very minimalist, but a bit confusing.
Like the free version of Transition Slider, I searched for the plugin in the WordPress repository, installed and activated it. After activation, the MetaSlider item appeared in the sidebar. The dashboard of the plugin is very minimalist, but a bit confusing.
The interface for creating a new slider opens immediately. Up in the menu I see the “Add Slide” option, I guess it should be selected to add three slides.
Clicking on “Add Slides” opens the Media Library where I select three backgrounds for the slides and then click “Add to slideshow”.
By some assumption, I then clicked on “Save” and “Preview” to see the slider.
I immediately noticed that the slider is in block type, in order to do the same we need to find an option with which we can expand the slider to full width. I’ve been looking for a long time, but in the end there is an option and it hides under “Advanced Settings”. But what further confused me was the “100% width” option was checked, and the slider in the preview was block size. 🤔
I hope that then the slider will be really Hero type as we imagined to do in the project.
The next step I wanted to do was add texts and buttons to the slides to make an identical Netflix slider. But then I realized I couldn’t find an option anywhere to add elements to the slide. I spent quite a bit of time searching, only to finally realize that there was an Add-ons option on the left side of the MetaSlider menu. I was happy to find a Layer editor there, but I was disappointed, this option does not come in the free version of MetaSlider, but in the PRO version.
And so here’s my whole idea to make a comparison of the most popular slider on WordPress.org and the Transition Slider failed. Since MetaSlider offers a layer option in the PRO version, I don’t have the ability to create two identical copies of a Netflix slider in both plugins.
But come on, I didn’t want to bother not being able to make an identical copy now, I have to do the most I can in MetaSlider. So the only option left for me to write text is within Caption, because that’s the only thing free MetaSlider has to offer.
Another big drawback, I didn’t have the ability to adjust the navigation style. So I had to leave a predefined style.
Since I’m now starting to understand why more and more people hate and don’t use sliders for this reason, when one of the most popular slider plugins in the free version looks like this and I miss so many basic features. Given the situation, I think it’s even impossible to do a fair slider speed test when a Netflix copy of the slider made in MetaSlider doesn’t have any elements or buttons at all.
📈 Performance Test
But regardless, I still did a speed test. I made a plain blank page that doesn’t include any plugins other than the tested ones. And the results were surprising, MetaSlider, which has no WebGL transition in it, as well as no layer elements on the slider, gave better test results in just a few points.
The test was done in Chrome Dev tools with the Lighthouse tool.
- I scanned each of the plugins few times using Chrome Dev Lighthouse tool before saving the results and using the median.
- I did each test on its own page with the other slider plugin deactivated.
- The page I tested featured the slider and no other content.
- I cleared the cache after testing each plugin.
Transition Slider results
MetaSlider results
If we look at Transition Slider it offers advanced WebGL transitions between slides and that the free version also offers layer elements so that everyone would sacrifice a few performance points for so much that we can do with Transition Slider.
🏅 Conclusion & Results
Why is MetaSlider the most popular slider plugin on WordPress.org ???
MetaSlider definitely lives on the old glory, I hope that’s why people don’t have the wrong impression and prejudice against sliders. But it definitely lags behind the Transition Slider compared to how many features the Transition Slider offers in the free version, and here the story expands even more in the PRO version.
I can’t say that a slider made looks like a disaster, but that it lags behind with capabilities and that it can’t be done what we want and imagine it’s true. With Transition Slider, everything we imagined in our Netflix project slider we were able to create, add and implement.
Overall, if I had to pick one plugin for creating free sliders, I’d choose Transition Slider. It’s one of the best free slider plugins for WordPress. It includes a huge range of features – including layers – and provides an easy-to-use and intuitive user interface, powerful WebGL transitions. And it doesn’t lag behind other sliders when it comes to speed.
If you’re using another free slider plugin, make the switch to Transition Slider. It’s easily the best free slider plugin available at WordPress.org.