Slider Settings
The Magic Dev slider template is a slider that keeps things simple and focused. Since it only shows one slide at a time, your visitors won’t get overwhelmed or distracted by anything else on the page. Plus, it’s full-width, so it stretches across the entire screen, giving your content plenty of space to shine.
Navigating the slider is pretty easy. You’ve got three easy ways to do so:
- First, there are the shapes at the bottom you can click to jump to any slide.
- If you’re on a touchscreen, you can just swipe left or right to move between slides.
- And from the second slide onward, you’ll spot a “Next” button that makes switching slides even easier.
Layers
After the first slide, all the others stick to the same basic layout, with familiar layers like headings, text, images, and buttons. But there are still some unique looks to keep things interesting. One of the coolest details is the progress bar that shows up from the second slide onward, which creatively highlights the skills of the people featured. We’ve already mentioned that there’s a built-in navigation, from the second slide, that’s super easy to set up by simply adding a link action to your layer.
On the first slide, you’ll spot rounded borders around the columns that showcase each person against colorful backgrounds. These columns even have a nice hover effect, making the whole experience more interactive. This is all thanks to some custom CSS. If you want to recreate it, you just need to apply a CSS class to the columns in the style settings and add your custom design in the Developer settings.
And, there’s one more design detail that we can’t forget about: the highlighted part of the heading on the first slide. This is also done with custom CSS, this way you can add an extra personal touch to your design.
Animations
After you’ve switched through a few slides, you’ll probably notice the Main Animation in action. It’s a simple, smooth horizontal slide that’s quick and doesn’t overpower the content. It affects both the background and the layers on each slide.
Each element on the slide has its own little entrance animation too, which makes the whole slider feel more lively. And it’s all done using the basic animation settings, so it’s super easy to pull off without any complicated setup.
Layout
Most of the slides stick to a simple, straightforward layout with two columns, each taking up half the slide. The right side is all about the visuals, usually just an image, while the left side is where all the important stuff happens, like text, which naturally grabs the visitors’ attention.
The first slide, though, mixes things up a bit. The top half still uses that two-column layout, but the bottom half adds a unique touch with four equal columns.
Responsive
Every slider is fully responsive, so you can easily adjust it to match your needs. This template is a great example of how flexible these settings can be, using tons of them to make everything look great on any device. For example, with the font resizer, you can adjust text sizes depending on the screen, so it’s always easy to read.
One fun detail is how the bottom row of the first slide changes on tablets and mobile. Instead of four columns, it switches to two columns per row with some space in between. You can set this up by going into the row settings and choosing how many columns you want per row for each device, plus adjust the spacing using the ‘Gutter’ setting.
You might also notice that some layers disappear on smaller screens, which is a great way to keep things looking clean on mobile. The “Hide on” option lets you choose which layers to show or hide on different devices, and you can easily control it for each layer individually.
