Settings
A full-width slider is the most popular way to display a slider in a website. These sliders allow viewing images in a large area, making them perfect as a header slider. This full-width slider example has thumbnail navigation, without actual thumbnail images. The simple text gives users an idea what the other slides are about, while indicating the currently viewed slide in a stylish manner.
This slider is the perfect choice for any blog website. You can easily create a dynamic WordPress post slider using this slider. A dynamic post slider helps you highlight your latest blog posts in a visually stunning way. You can display the name and avatar of the post author, the title, excerpt, featured image and, of course, the post category. These are the most important aspects which help get more readers on your actual blog post.
Layers
Each slide has the same layers: an image layer, 2 headings, a text layer and finally, a button layer. If you hover over the layers, you can notice the big heading has another color on hover. You can customize and change this color in the Style tab of the layer window. Here you need to change the typography to hover, and then you can set a different style and color for the hovered text.
Animations
When you switch slides, you can see the next slide comes in with a horizontal animation. This animation is the main animation of the slider which you can change to vertical or fade in the Animations tab of the slider settings.
Layout
The slider stays from 4 slides, and each slide has the same layout: the layers are under each other. On the bottom of the slider you can see the thumbnails control. The thumbnail shows the title and the description of the slides. You can change the title and the description at the Content tab of the Slide settings.
Also, you have the option to customize the thumbnails. For that go to the Controls tab of the Slider settings. Do you want to change the blue hover color of the thumbnails? For that click on the green style button at the thumbnail, and change the tab to active on the top right corner.
Responsive
The full-width thumbnail slider is fully responsive. When you check it on your phone, you can notice the thumbnails are hidden and the texts are smaller. You can set the font sizes with the text scale option device specifically.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Desktop
Mobile
Related Post: Enrich your Blog with a Post Slider
Related Post: Create A Responsive Thumbnail Slider
Related Post: 15 Beautiful Full Width Slider Examples
