This boxed slider fits perfectly into your page or post content. The slider uses the featured image of the post as thumbnail and background image. 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 displays the post title, and above it the post’s category and date. This slider has yet another nice effect, the slide changing parallax. This simple but elegant effect gives a unique touch to the slider.
In Smart Slider 3 you can customize your thumbnails as well. In this template the thumbnails are 180x100px big, and they are positioned to the right side of the slider. 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 caption texts have black background and white font-color on the thumbnails, and they are legible because of that contrast.
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 blue background, and if you use a dynamic slider, you can replace their text with a variable.
The slider moves vertically, you can drag to the top or bottom, or you can use the thumbnails for navigation. Also you can move the slider with your keyboard, which can be comfortable for the visitors. You can fully customize the slider so you can add other layers on it, you can use layer animation on your layers or you can use it as a simple image slider.
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
