Rainforest
Discovering Myself
In the Middle of the Rainforest
Traveller
Are there differences between
travelers and tourists?
Mountain
When You Reach the Summit,
You Are Only Halfway There
previous arrow
next arrow

WordPress Fullwidth Post Slider

πŸ’» Settings | πŸŽ“ Layers | πŸŽ‰ Animations | πŸ—οΈ Layout | πŸ“± Responsive | ⚑ Speed

Description: A beautiful full width post slider like this will shine on your site for the greatest satisfaction of your visitors.

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

Minimum version: 3.5.0.0

Tags:

Settings

The Fullwidth Post slider has 3 slides, and each slide has the same structure. The slider is a full width slider, so fills the available horizontal width of your screen. If the container isn’t full width, you may need to enable the force full width option.

Full width layout

This slider can be used as a post slider, and you can make it dynamic. Just import the slider, open the slide, and copy it. Then create a dynamic slide, set the generator, and paste the copied layout. Then you can add variables to the layers, and they will dynamically change.

Layers

The slides don’t have too many layers. There is a button layer, and after that 2 heading layers are. Below these layers you can see an image which is in absolute position, and this image is the same as the slide background image, but doesn’t fill the width and height, and doesn’t have an overlay on it. The CTA on the top has an eye-catching color, which can display the category of the post, also you can put a link on it.

Settings of the button layer

Animations

If you check the slider you can notice it autoplays in every 8 seconds. The slider autoplay indicator on the bottom displays the time and when the next slide will come. This gives a nice movement to the slider, also the visitors will know there are other slides in the slider. Also, you can stop the autoplay if you click on the slide, so you will have enough time to read the content.

Autoplay indicator

Layout

Each slide has the same layout: there is a background image, over that is an image layer, and over the image are 3 layers. The autoplay indicator is on the bottom, and the arrows are in the left and right sides. These arrows have an orange hover color. You can change them in the Controls tab of the Slider settings if you click on the green Style button. Then the Style manager will open, and you can customize your arrow.

Hover color of the arrows

Responsive

The slider is fully responsive. The texts are smaller on tablet and mobile thanks to the text scale option. You can use it to make the text lower or bigger on different screens.

Text scale option

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.7 s
Largest Contentful Paint
0.7 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.026
92

Mobile

First Contentful Paint
1.1 s
Speed Index
1.6 s
Largest Contentful Paint
3.3 s
Time to Interactive
2.9 s
Total Blocking Time
30 ms
Cumulative Layout Shift
0.002

Related Post: Enrich your Blog with a Post Slider

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

Showcase SimpleVideo ParticleThe RockLogo Carousel