iPad
The big iPad comparison

Suspendisse efficitur eros ligula, eget dapibus ex pellentesque quis. In nec quam auctor, aliquet ex vitae, suscipit lectus.

iPad Pro

Apple M1 Chip

Triple camera

iPad

A13 Bionic chip

Single camera

iPad Pro
iPad Pro
iPad
iPad
iPhone
Compare latest iPhone models

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor

iPhone 13

A15 Bionic chip

Triple camera

iPhone SE

A12 Bionic chip

Dual camera

iPhone 13
iPhone 13
iPhone SE
iPhone SE
iMac
M1 iMac compares to the Intel iMacs

Cras nec odio sit amet erat tristique malesuada nec non libero. Mauris laoreet rhoncus tempor. In placerat justo felis, ut tristique magna auctor et.

M1 iMac

Apple M1 Chip

Memory (up to)

Intel iMac

Intel processor

Memory (up to)

M1 iMac
M1 iMac
Intel iMac
Intel iMac

Product Compare

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

Description: The Product Compare slider is a great way to compare your old and new products and show the most important changes to your customers.

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

Minimum version: 3.5.1.1

Tags:


💡 Best features in this slider
  1. HTML layer with the blurred shape
  2. Before after layer
  3. Shape Divider
  4. Text bullet

Slider Settings

The Product Compare slider looks like the element people think of when you mention the “sliders” to them. It displays a single slide at a time, which helps visitors focus on the message you want them to get. Additionally, it fills the screen horizontally, which is trendy and looks good on today’s large screens.

The slider has a total of three slides. For convenient navigation visitors can use the Text bullets at the bottom of the slider. This text bullet displays the title of the slide, which helps giving an idea to the visitor about the slide.

Apart from bullets it’s also possible to browse the slides by dragging the mouse or by swiping. This navigation is super convenient for touch screen users.

Layers

The most important layer on the Product Compare slider is the Before After layer. This layers helps you create cool looking before after sliders. Choose a before and an after image and type a caption for them. Write a short caption to describe the images for your visitors. Finally, choose the color and shape of the divider. The Before After slider is ready to amaze the visitors!

Other notable layers on the slide are the heading, text, image and button layers. The button layer on this template is the “Learn more” text, and it’s very minimalistic. There’s also an HTML layer below the other layers, which displays this cool blurred shape in the background. The easiest way to locate this layer is to use the Layer List.

HTML layer in the background

Animations

There are many animations on this template. The layer animations are easiest to notice, as they appear on large elements. Additionally, there’s a layer animation on every layer. These basic layer animations make the layers move upwards to their place.

Layer animations on the Timeline

The other animation on the slider is slightly less noticeable. It’s the animation of the Shape Divider, which makes the two inclines appear from the bottom. The result is spectacular and your visitors will love it.

Layout

The base layout of the Product Compare slider is a row that has two columns. The first column has the textual layers, and the second contains the before after layer. By default when you add a row, it’s columns are 50% wide. In this case the first column is only 32%, which allows the before after layer to take up the remaining 68%.

Another cool layouting solution is the 2×2 box that shows the product’s features. The main element here is a two column row where each column contains another row with two columns. But the columns of this inner row appear vertically below each other. In other words, the “iPhone 13” and “iPhone SE” layers are in a different row. This kind of layout helps keeping the details of the product together in every responsive scenario.

Responsive

Smart Slider is a responsive slider for WordPress, and it offers tons of cool options to fine-tune how your sliders look on mobile. The option you’ll want to use the most is the ability to change the text size for different devices. As a matter of fact, it’s very rare to have a text that’s font size is perfect for desktop, tablet and mobile as well.

Font Resizer on mobile

If you check the template on mobile, you’ll notice that the two columns appear in a separate line below each other. Although all rows break automatically this way, you can change their Wrap After option anytime if your layout needs the row to break differently.

Core Web Vitals

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

98

Desktop

First Contentful Paint
0.3 s
Speed Index
1.6 s
Largest Contentful Paint
0.6 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
96

Mobile

First Contentful Paint
1.1 s
Speed Index
3.1 s
Largest Contentful Paint
2.1 s
Time to Interactive
3.3 s
Total Blocking Time
160 ms
Cumulative Layout Shift
0

Related Post: Introducing Before After Layer

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


Similar Sliders -

Diet BlockPhoto CompareRenovation