Slide 1

May 2, 2018 by James Wright

Three Remarkable Shipwreck Stories from History

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque...

Slide 2

May 22, 2018 by Letizia Biafore

Day Twenty Eight: The First Mountain Pass

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque...

Slide 3

Jun 9, 2018 by Delinda Cammarata

What's The Future Of Blogging Platforms?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque...

previous arrowprevious arrow
next arrownext arrow

Full-width Post Slider

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

Description: Creating a WordPress Post Slider is the easiest and most beautiful way to show your favorite posts to your new visitors.

Free: Give Smart Slider 3 a try for free. Download now!

Minimum version: 3.5.0.0

Tags:

Settings

This slider template uses the full width layout. Full width sliders are the perfect sliders to use as your header slider. The header slider is the first thing a visitor sees when they enter the page. This important section is the greatest place to show your post slider. It’s impossible for your visitors to miss it and it convinces them to stay and read your blog.

Layers

On the slider, there is a Heading layer, 2 text layers, a button layer and an image layer. The image layer is a separator between the title and the description in this case. Each slide has a background image, which fills the whole slide. By default the Fill mode is used on the background images which will cover your slide. When making full width sliders, this filling mode is the best, but if you want your whole image to be on your slide without being cropped, you can use the Fit filling mode.

The list of the layers
The list of the layers

Animations

The slider is switching its slides with a horizontal animation. When you click on the arrow, or bullets, or drag, the next slide comes with a great looking animation.

Layout

The Free Full Width Post Slider is a modern way to show your most recent posts. In the background you can display the featured image of the post taking up the full browser width. The slider can also display the post title, date, excerpt and author, which you can see on the left side. For that you need to create a dynamic post slider, and use variables which will automatically refresh.

Creating a dynamic slide
Creating a dynamic slide

You can also use the slider as a static slider, and you can fully customize every part of it. There is a 1-row 1-column structure on the slider, the row has a small shadow and padding on each side which makes the slider more beautiful. The slider has a maximum 600px height, but your slide’s height is based on the layers and all the slides’ height are based on your highest slide.

Responsive

To make the text size smaller, we have used the Text scale option on the textual layers. This is a device specific setting which you can customize in every view.

Text scale option
Text scale option

Core Web Vitals

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

99

Desktop

First Contentful Paint
0.3 s
Speed Index
0.4 s
Largest Contentful Paint
1 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.026
94

Mobile

First Contentful Paint
1.1 s
Speed Index
1.3 s
Largest Contentful Paint
3.1 s
Time to Interactive
2 s
Total Blocking Time
70 ms
Cumulative Layout Shift
0

Related Post: Enrich your Blog with a Post Slider

Related Post: Do you need a Free Full Width Slider for your Site?


Similar Sliders -

WordPress Magazine SliderWordPress Post Slider with ThumbnailsPost CarouselWordPress Post Slider Carousel