Slide 1
From $110
Video Game Controller

Imagine a new controller that takes your video gaming to the Next level. Move quicker, fire faster and reach further… Become unbeatable !

Slide 2
From $1449
MacBook Pro

It’s faster and more powerful than before, yet remarkably thinner and lighter. It has the brightest, most colorful Mac notebook display ever.

Slide 3
From $369
Apple Watch

Built-in GPS. Water resistance to 50 meters. A new lightning-fast dual-core processor. And a display that’s two times brighter than before.

Slide 4
From $969
Phantom 3 Drone

A complete 1080p camera and 3-axis gimbal system are integrated with the Phantom 3 Advanced edition quadcopter from DJI.

Slide 5
From $729
iPhone 6s

The brightest, most colorful iPhone display. Splash and water resistance. And it looks every bit as powerful as it is. This is iPhone 6s.

Slide 6
From $899
HTC Vive Headset

Get started on your VR journey with titles that make the most of VIVE’s immersive room-scale technology. Order VIVE today!

previous arrow
next arrow

Product Showcase

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

Description: Tired of common product sliders? The Product Showcase slider is what you need! The showcase slider type displays one slide, the active slide in the middle.

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

Minimum version: 3.5.0.0

Tags:

Settings

Tired of common product sliders? Do you want to show more than just one product for the visitor, but not to distract them with many? The Product Showcase slider is what you need! The showcase slider type displays one slide, the active slide in the middle. Then on the left and right side (if there’s enough space) they can see parts of the next and previous slide. This helps the visitor with two things: focusing on one product and learning that there are more products to see.

Showcase slider type

Layers

Each slide has the product image as a slide background. This allows the image to be seen in a large size. At the bottom of the slides the visitor can learn more about the product. The first and most obvious information they see is the price of the product, which is green. Below the price, they can learn the name of the product written with a large, white font. The last content on the left side is the product description. On the right side, there’s a CTA button the visitors can use to buy the product. It has the same green color as the price and it’s pill shaped.

Layer list of the slider

Animations

When you switch a slide, you can see the slider moves horizontally. This animation is the main animation of the slider which you can set in the Animations tab of the slider settings. Also, you can see the next and previous slides are much darker than the active slide. This is because their opacity is 20%, so you can focus on the active slide, but you can still see the other slides.

Animation settings

Layout

Visitors can navigate on this slider in three ways. The first and most obvious way is the arrow on the left and right sides of the slider. It’s a special shaped, white arrow, which is easy to notice on the dark background. Apart from the arrows, the visitors can switch slides by dragging or swiping. This swiping is favored on touch screen devices, like mobiles or tablets. On mobile the swipe is much more natural, than tapping a small arrow. The third way to switch slides is clicking or tapping on the next or previous slide. This action makes the slider switch to the selected slide.

Responsive

When you check this showcase on smaller views, you can see the slider will be smaller, and you can see only one slide on mobile. Because of that the visitors can focus on the content, and all of the layers are legible.

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

Mobile

First Contentful Paint
1 s
Speed Index
1.8 s
Largest Contentful Paint
3 s
Time to Interactive
2.1 s
Total Blocking Time
20 ms
Cumulative Layout Shift
0.008

Related Post: Do you Need a Product Slider for your Webshop? Yes, you do!

Related Documentation: Responsive behavior of the showcase slider


Similar Sliders -

Product CarouselCosmeticsProduct BoxedTop 5 Products