previous arrow
Slide 3
Photography
Lorem ipsum dolor sit amet, consectetuer adipiscing
By Letizia Biafore
Lifestyle
Aenean commodo ligula eget dolor
By Tullia Tomasini
Technology
Penatibus et magnis
By James Wright
Lifestyle
Donec quam felis, ultricies nec
By Delinda Cammarata
Slide 1
Photography
Lorem ipsum dolor sit amet, consectetuer adipiscing
By Delinda Cammarata
Technology
Aenean commodo ligula eget dolor
By Letizia Biafore
Science
Penatibus et magnis
By Letizia Tullia Tomasini
Lifestyle
Donec quam felis, ultricies nec
By James Wright
Slide 2
Photography
Lorem ipsum dolor sit amet, consectetuer adipiscing
By James Wright
Technology
Aenean commodo ligula eget dolor
By Letizia Biafore
Science
Penatibus et magnis
By Delinda Cammarata
Lifestyle
Donec quam felis, ultricies nec
By Tullia Tomasini
next arrow

Magazine Slider

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

Description: Create your Magazine Slider to a dynamically changing slider with Smart Slider 3, and use the group result option to display more posts in one slide.

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

Minimum version: 3.5.0.0

Tags:

Settings

The Magazine slider looks super special, but it’s based on the most common slider type. That’s the simple type, which can display one slide at a time. This is why you can see a full set of new image boxed after slide switching.

Speaking of slide switching, it’s possible it three ways. Firs, using the arrows which are outside of the slider. It’s a common way to use simple type sliders as headers, which needs the sliders to be full width. But this slider is not full with, it’s boxed. A boxed slider does not fill the screen, but the container it was put in. That is why the outer positioned arrows are visible.

Outer position of the Arrow control

The second way of navigation is the bullets at the bottom of the slider. Apart from being cool navigation tools, bullets have another important purpose. They show all available slides. The last way you can browse the slider is swiping on touch screen devices. A swiping action is natural on touch screen devices, so this gives a great user experience. Also, if you have a mouse, you can drag towards the direction you want to switch to.

Layers

You can find headings, rows and columns on this slider. The heading layers provide space to display the category, title and author of the post. For this reason the Magazine slider is suitable for creating a post slider. To be able to display the 4 post details inside a single slide, make sure you set the Group result option.

One of the most spectacular parts of the Magazine slider is the gradient images. How to create such effect? Go to the column, and set a background image. Then choose the gradient direction. Finally, set a semi-transparent background color for the start and end color.

Gradient background color and background image of the column

Animations

There are no layer animations on the Magazine slider. In fact, the only animation is the Main animation, which is responsible for the horizontal sliding effect when the slides change.

Layout

The layout of the Magazine slider is built with rows and columns. The main container is a two column row, which is stretched to cover the available space on the slide. The left column only has the textual layers. But inside the right column, there are two other rows. The top row has two columns, but the bottom one has only one.

Mazazine Slider layout with rows and columns

The Gutter option of the rows’ creates distance between the columns. But the bottom row inside the right column has a top margin for the same purpose.

Responsive

The Wrap after option of the row decides how many columns can fit next to each other. On mobile this value is set to 1 by default, which means every column will break into a new line. The Magazine slider is an excellent example for this behavior. The rows and columns which are next to each other appear one after the other.

Wrap after 0 (left) and 1 (right)

If your text sizes are too big or too small on mobile, you can use the Font resizer to adjust it. This tool helps you achieve the perfect text size for mobile. Additionally, it’s always at hand as it’s available on the Responsive bar.

Font resizer

Core Web Vitals

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

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.5 s
Largest Contentful Paint
0.7 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.001
97

Mobile

First Contentful Paint
1.1 s
Speed Index
2.1 s
Largest Contentful Paint
2.3 s
Time to Interactive
3.3 s
Total Blocking Time
160 ms
Cumulative Layout Shift
0.001

Related Documentation: How to use a demo slider in your generator

Related Post: Enrich your Blog with a Post Slider


Similar Sliders -

WordPress Post Slider with ThumbnailsWordPress Post Slider CarouselPost CarouselWordPress Post Slider Showcase