Slide
Original
Original
Black & White
Black & White
Janice Smith: Elderly People in Contemporary
01
|
05
Slide
Original
Original
Black & White
Black & White
Robert Villa: American Girl in Rome
02
|
05
Slide
Original
Original
Black & White
Black & White
Theia Warner: Kingpin of Mallorca
03
|
05
Slide
Original
Original
Black & White
Black & White
Bridget Blair: Waiting for the Wind
04
|
05
Slide
Original
Original
Black & White
Black & White
Elisha Steele: Smile: My Free Therapy
05
|
05

Photo Compare

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

Description: The Photo Compare slider is the prefect addition to your blog posts to showcase your work.

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

Minimum version: 3.5.1.1

Tags:

Slider Settings

The Photo Compare slider is a traditional looking slider. This means it displays one slide at a time. As a result your visitors get only one message at a time which they can fully understand before moving on to the next slide. The layout of this slider is “boxed” which means it fits into the container you place it. This makes the Photo Compare slider perfect addition to your blog posts.

There are no common controls to switch slides in this slider. In other words, none of the standard controls are enabled for this slider. The two arrows you can see are custom arrows created from image layers.

Layers

Two of the most important layers on the slider are the image layers that display an arrow. They’re the elements your visitor can use to switch slides. Since it’s an image layer, you can freely replace the arrows to something that suits better to your website’s design. To create the slide switching we used the Link Actions on these layers.

The other most important layer is the Before After layer, as it’s the base of the slide. The Before After layer is a cool element to compare two photos. In this case, it compares the monochrome and colorized version of the picture.

Another notable layer is the heading layer, which displays the caption of the photo. It makes the name of the photographer bold and shows the photo description in normal weight.

Animations

The only animation on the Photo Compare slider is the Main Animation. The Main Animation is the basic slide animation, which moves all elements on the slider. It can move horizontally or vertically, or with a simple fading effect.

Layout

The base layout is pretty simple at this template. First there’s a Before After layer. Below there’s a two column row, where one column contains the caption and the other has the navigation.

In this second column there’s an interesting layout element. This element is the slide counter, which displays the “01|05” text on the first slide. To create something like that on your slider, first add a new row. Second, add another column to the previously added row. Now all you need to do is to add the layers that display your content to each row. Finally, disable the full width option of the row.

Responsive

A responsive WordPress slider like Smart Slider has many cool options to ensure your sliders look perfect on all screens. The most important option for this is the ability to adjust the font size for every device. As a result, you can achieve better looking designs while maintaining the legibility of your text.

If you checked the slider on your phone, you’ve probably noticed that the previous arrow moved around. On desktop the slide counter appears first, then the previous and next arrows. However, the order changes on phones. The previous arrow appears first, then the slide counter and finally the next arrow.

Core Web Vitals

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

100

Desktop

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

Mobile

First Contentful Paint
1 s
Speed Index
1.6 s
Largest Contentful Paint
2.3 s
Time to Interactive
3.1 s
Total Blocking Time
90 ms
Cumulative Layout Shift
0

Related Post: Introducing Before After Layer

Related Post: How to Create a WordPress Gallery Slider for Your Website


Similar Sliders -

Product CompareDiet BlockRenovation