Phantom Drone
From $369
Phantom 3 Drone

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

Apple Watch
From $1299
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.

HTC Vive
From $899
HTC Vive Headset

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

Phantom Drone
Apple Watch
HTC Vive
previous arrow
next arrow

Full-width Product Slider

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

Description: Every online store needs a good product slider to show what they have to offer. Smart Slider 3 is the best solution to create this product slider.

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

Minimum version: 3.5.0.0

Tags:

Settings

A product slider is the best tool at your disposal to encourage visitors to buy from your store. Most product sliders display many products next to each other. While that approach saves space, it makes one specific product harder to focus on for the visitor. This full-width slider took a different approach than most product sliders. It shows a large product image as background. This raises attention and makes the visitor focus on the product more easily. This slider won’t leave the customer wondering what they should do to shop. There’s a clear, minimal CTA on the slider delivering the clear message: buy now!

The slider switches automatically after spending 10 seconds on each slide. However, when the mouse enters the slider area, the slider autoplay gets paused. This allows the visitor to read the text and enjoy the slide without interruption. The navigation is also an interesting part of the Full-width Product Slider. At the bottom, there are thumbnails with the product images. This is a simple but effective way to encourage visitors to check all slides.

Autoplay settings

Layers

Each slide contains the same layers. There is a row with a column where all of the layers are. The row has a white background color, a small border radius and a nice box shadow. The width of the row is maximum 450px, so the row looks like a white box. There is an image, 2 heading, a text layer, and a button layer in the column.

Layer list of the slider

Animations

The background images have the popular Ken Burns effect on them. This gives a slight movement to the slider. After the slides switch, the layers on the right side appear with a flipping layer animation.

Ken Burns effect

Layout

Once the visitor gets interested in your product, they can learn more about it. There’s a white description box about the item at the right side of the slider. This info box was created using default positioning, which guarantees that the description looks perfect on every device.

Also, you can notice the controls around the slider. You can see an autoplay indicator on the top, arrows on the left and right, and thumbnails on the bottom.

Responsive

Lots of people use their phone for browsing. They expect almost the same user experience as desktop users do. This includes being able to read all content without having to zoom in. Default positioning helps with this, as it keeps the text sizes the same on every device, so they’ll be large enough on mobile.

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 13, 2021. For the latest result analyze now!

99

Desktop

First Contentful Paint
0.8 s
Speed Index
0.8 s
Largest Contentful Paint
0.8 s
Time to Interactive
0.8 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.032
95

Mobile

First Contentful Paint
1.1 s
Speed Index
1.9 s
Largest Contentful Paint
3 s
Time to Interactive
2 s
Total Blocking Time
70 ms
Cumulative Layout Shift
0

Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro

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

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

Product ShowcaseBoxed Product CarouselProduct BoxedCosmetics