TRAINING
Howard Hughes
My five week beginner mountaineering fitness plan

I learned the hard way when I started coaching that general fitness only gets you so far in the mountains. Two of my lessons stand out. First, general fitness strength and barbell training doesn’t do much for rock climbing performance.

BUSINESS
Amanda Murray
How does a small eCommerce business handle logistics?

Supply chain and logistics are an integral part of every eCommerce business, large or small. A logistics plan helps your business run efficiently and cost effectively. Without a plan, your costs will rise drastically.

TIPS & TRICKS
Carolyn O'Hara
10 Tried-and-true secrets for a productive home office

When you begin to set up your home office, one of two things tend to happen. Either you are unable to easily identify what equipment and technology you use every day so you underestimate what you will need to get your office up and running.

FOOD & DRINK
Carolyn O'Hara
The craft beer revolution: what exactly is it all about?

If you drink beer, you've probably noticed that the variety of flavors and breweries have grown tremendously in the last few years. If you don't drink beer, your friends have probably tried to tempt you into trying a pint from a local brewery.

TRAINING
My five week beginner mountaineering fitness plan
BUSINESS
How does a small eCommerce business handle logistics?
TIPS & TRICKS
10 Tried-and-true secrets for a productive home office
FOOD & DRINK
The craft beer revolution: what exactly is it all about?
previous arrow
next arrow

Full-width Thumbnail Slider

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

Description: A full-width slider is the most popular way to display a slider in a website. The simple text thumbnail navigation helps users learn about the other slides.

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

Minimum version: 3.5.0.0

Tags:

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.

Hover color of the heading

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.

Slide title and description

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.

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.5 s
Largest Contentful Paint
0.9 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.024
95

Mobile

First Contentful Paint
1.1 s
Speed Index
1.5 s
Largest Contentful Paint
2.9 s
Time to Interactive
2.5 s
Total Blocking Time
90 ms
Cumulative Layout Shift
0

Related Post: Enrich your Blog with a Post Slider

Related Post: Create A Responsive Thumbnail Slider

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

Logo CarouselOrganic FoodBroken Grid SliderCoffee