WordPress Carousel Post Slider

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

Description: A carousel type slider can show multiple slides at a time, making your WordPress Post Slider look fabulous.

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

Minimum version: 3.4.1.6

Tags:

Slider Settings

The WordPress Carousel Post Slider is a cool slider you can highlight your post content with. It uses the Carousel slider type, which can display more slides at a time. For this reason, carousel sliders are perfect for displaying dynamic slides. For example, you can use it to create a post or a product slider.

Layers

The layers on the slider are quite simple. There are two images: one at the top, that displays the featured image. You can find another image below the post title, and it’s used as a separator. There are two headings and a text layer. The first heading displays displays the category of the post. The second heading displays the title of the post.

Animations

The only animation you can find on this slider is the slide changing effect, which is a simple horizontal animation. By default the Carousel slider switches all visible slides. But as you can see on this slider, it switches slides one by one. This behavior happens because we turned on the Single switch option at the Slider settings → Animations tab.

Animation Settings

Layout

In Smart Slider you can position your layers from their parent elements. For example, if you want to place your layers to the bottom of the slide, you need to set that at the Content layer. Simply change the Vertical align option to bottom, and the layers will be at the bottom.

By default the Vertical alignment is set to center. When we created this slider, we wanted to make sure that the large images start at the top of each slide. So, we changed the Vertical align to Top at every slide.

Vertical Align center (left) and top (right)

Responsive

In most slider plugins you can only place your layers absolutely. This means the layers won’t adapt to each other, for example, when a text breaks into more lines on small screens. As a result, the layers will overlap, and you’ll need to spend lots of time to make your slider responsive.

Smart Slider 3 uses a different positioning method. It’s a relative positioning, what we call Default position. Default layers can’t overlap, and instead they’ll make the slider taller if they need more space. As a result, your content will always be visible. Furthermore, Default layers keep their original size on small screens by default, which ensures the good look. Of course, you can make device specific adjustments, but it’ll take a lot less time.

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 13, 2021. For the latest result analyze now!

99

Desktop

First Contentful Paint
0.3 s
Speed Index
1 s
Largest Contentful Paint
0.9 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.008
95

Mobile

First Contentful Paint
1 s
Speed Index
3.2 s
Largest Contentful Paint
2.8 s
Time to Interactive
2.2 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.007

Related Post: Enrich your Blog with a Post Slider

Related Video: Slide Editing – Alignment & Spacing


Similar Sliders -

Infinite Logo CarouselWordPress Post Slider CarouselParticle CarouselMinimal Logo Slider