The Mysterious Case of Car Design
The Mysterious Case of Car Design
Porsche Sees Opportunity Fom Digital Revolution
Porsche Sees Opportunity Fom Digital Revolution
How much is that old Volkswagen worth, anyway?
How Much Is That Old Volkswagen Worth, Anyway?
The Psychology Of Color In Car Design
The Psychology Of Color In Car Design
Ford Shelby GT350 Lives On for Another Year
Ford Shelby GT350 Lives On for Another Year
Engine Reliability: The Top 10 Brands
Engine Reliability: The Top 10 Brands
The Mysterious Case of Car Design
The Mysterious Case of Car Design
Porsche Sees Opportunity Fom Digital Revolution
Porsche Sees Opportunity Fom Digital Revolution
How much is that old Volkswagen worth, anyway?
How much is that old Volkswagen worth, anyway?
The Psychology Of Color In Car Design
The Psychology Of Color In Car Design
Ford Shelby GT350 Lives On for Another Year
Ford Shelby GT350 Lives On for Another Year
Engine Reliability: The Top 10 Brands
Engine Reliability: The Top 10 Brands
previous arrow
next arrow

Post Slider with Thumbnails

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

Description: This boxed slider with Thumbnails fits perfectly into your page or post content. Import it from the Template Library, and use it as a dynamic slider.

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

Minimum version: 3.5.0.0

Tags:

Settings

This boxed slider fits perfectly into your page or post content. It’s easy to set up and customize the thumbnails to ensure that the slider fits your site’s layout. Using a thumbnail slider is a great way to encourage the visitor to see more slides. The slider looks simple but attractive with its carefully chosen colors. It can display the post title, and above it the post’s category and date.

Boxed layout

Layers

Each slide has the same structure, there is a row, and inside the row there is another row with 2 cols and the heading layer. The heading layer has a black background color which is similar to the captions. The small heading layers have a blue background, and if you use a dynamic post slider, you can replace their text with a variable.

Layer list of the slider

Animations

The slider moves vertically, you can drag to the top or bottom, or you can use the thumbnails for navigation. This vertical animation is the main animation of the slider which you can change in the Animations tab of the slider settings.

Vertical main animation

Layout

The slider has a simple layout, there is a row, and inside this row is another with 2 columns and with the heading layer. On the right side of the slider you can see the thumbnails which you can fully customize. In this template the thumbnails are 240x100px big. The caption texts have black background and white font-color on the thumbnails, and they are legible because of that contrast.

Settings of the thumbnail control

Responsive

We don’t need thumbnails for mobile, because they don’t look fine in small view so the thumbnails are hidden in this view. The text sizes are smaller on mobile. You can set the font size device specifically with the 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
94

Mobile

First Contentful Paint
1.1 s
Speed Index
1.4 s
Largest Contentful Paint
3.1 s
Time to Interactive
1.9 s
Total Blocking Time
20 ms
Cumulative Layout Shift
0

Related Post: Enrich your Blog with a Post Slider

Related Post: Create A Responsive Thumbnail Slider


Similar Sliders -

Full-width Thumbnail SliderWordPress Post Slider ShowcasePost CarouselFull-width Post Slider