Slide 1
01
|
03
Creative Space
Lost in Green Eyes
Read the Story
Uncertain World
Slide 2
02
|
03
Uncertain World
Creative Space
Read the Story
Lost in Green Eyes
Slide 3
03
|
03
Lost in Green Eyes
Uncertain World
Read the Story
Creative Space

Photo Story

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

Description: Use the Photo Story slider, and show your latest photos, link your blog post and share your story with your readers.

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

Minimum version: 3.5.0.0

Tags:

Settings

The Photo Story is a full width image slider, you can easily use it on your photography page. Each slide has a background image which can be your photo, and you can link a story and navigate to your blog.

The slider uses the full width layout so it fills the horizontal area of the browser. When you switch a slide the next image will fade in. This fade animation is coming from the Main animation. You can set or change it in the Slider settings → Animations tab.

Main animation

The slider doesn’t use any controls. The arrow that you can see on it are image layers, and are linked with link actions which you can navigate to the next or previous slides.

Layers

The slider uses basic and simple layers: headings, and images. They are ordered in rows and columns. You can find all of the layers in the layer list. You can fully customize them. These layers were added manually into the slider. If you want more than 3 slides, then you can change the “03” to “04” which you can easily do in the layer window.

The layers have important roles in the slider. They aren’t just content, but you can also navigate with them. With the 2 rows where the previous and next titles are you can navigate with link actions.

Layer list and link action

Animations

The best feature of this slider is the text animation on the big heading at the bottom. When you switch slides, the text will move with a nice animation. You can customize this animation if you click on the layer → go to the layer window → Content tab. Here you can find a text animation section, where you can reach the animation manager. You can set the modes where the text can move, the duration or the transform.

Text animation

Layout

At first sight you might think the slider uses a complicated layout. There are a lot of rows and columns in each other. The layer list can help you to find out the structure. Also, you can open or close a row or column group with the small arrows near their name which you can make the layer list simple.

Layer list

Responsive

The slider is fully responsive. 2 columns are hidden on mobile devices, so you can see only the arrow images. In Smart Slider your slide’s height is based on the layers and all the slides’ height are based on your highest slide. Since this slider doesn’t contain too many layers, then it will be small. With using paddings, you can make the height taller which you can set at the Slide settings.

Padding on mobile

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.4 s
Largest Contentful Paint
0.5 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.052
100

Mobile

First Contentful Paint
1.1 s
Speed Index
1.2 s
Largest Contentful Paint
1.8 s
Time to Interactive
1.6 s
Total Blocking Time
50 ms
Cumulative Layout Shift
0

Related Post: How to Create a Cool Text Animation

Related Post: How to Create Beautiful Responsive Image Slider?


Similar Sliders -

Free Thumbnail Slider for WordPressCarousel with Lightbox SliderThumbnail sliderFlickr Slider