Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, the offer ends on December 2nd!

Buy Now
Clothes
Be the envy
of the
skatepark

Eleifend vulputate maecenas vitae eget in cras nunc eu sapien. Diam quisque et egestas lectus euismod sed nunc. Sed.

Boards
Custom
for you

Eleifend vulputate maecenas vitae eget in cras nunc eu sapien. Diam quisque et egestas lectus euismod sed nunc. Sed.

Gears
Custom
decks just
for you

Eleifend vulputate maecenas vitae eget in cras nunc eu sapien. Diam quisque et egestas lectus euismod sed nunc. Sed.

previous arrow
next arrow

Sk8er shop

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: A bold, full-width slider designed for a skate shop. Smooth animations, nice visuals, and layered text keep the energy high while putting your products front and center, on any screen.

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.5.1.26

Tags:

Settings

This is a classic full-width slider, the kind you’ve probably seen on tons of websites. It shows one slide at a time, keeping the focus exactly where it should be, on your content. The slides stretch edge to edge across the screen for maximum impact.

Full width layout

You can swipe through on smaller screens, or simply click the arrows to move back and forth.

Layers

This template keeps things simple and stunning. It uses basic layers like headings, text, buttons, and images to create a clean, eye-catching section for your page. Each slide follows the same layout, so everything stays consistent as visitors swipe through.

Some layers come with a little extra styling. For example, the button has a box shadow that gently fades when you hover over it, thanks to a smooth transition added with custom CSS.

custom CSS on the button element

The two larger images on the right also have some custom styling, applied via CSS classes in the Developer settings. These settings help the images subtly blend with the background, giving the slider a nice feel.

Animations

This slider doesn’t just look good, it moves beautifully too. The layers on the left side of each slide animate in one by one, sliding in from the top and bottom with a slight delay between them, using IN layer animations.

Meanwhile, the larger images on the right use a continuous Loop animation, drifting gently in opposite directions along the x-axis, adding a dynamic feel without being distracting.

animation timeline in the sk8er shop slider

On top of that, the entire slider uses a smooth horizontal Main animation to transition between slides, smoothly tying it all together.

Layout

Each slide follows the same balanced layout, and it’s all in the details. The main row is split into two columns, where the left one takes up 40% of the space, while the right gets a little more room with 60%.

column sizing in Smart Slider

You’ll also notice a few creative overlaps in the design, that’s done on purpose using the z-index setting, which controls which elements sit in front or behind others.

Responsive

Smart Slider makes it easy to build sliders that look great on every screen. It comes with useful features to help you fine-tune your design for tablets and phones.

For example, you can quickly adjust text sizes with the Font resizer, perfect for making sure everything fits nicely on smaller screens.

If you’re using rows, the columns will stack by default when the screen gets narrower, left goes on top, right goes below. But don’t worry, you can easily change the column order on mobile to create a layout that feels right for you.

Similar Sliders
Mega MagazineMonolith Boxed Slider404 ImageAgency