Morning Slide
Afternoon Slide
Evening Slide
previous arrow
next arrow

City

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

Description: Tell your story with visually stunning animations!

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

Minimum version: 3.5.0.0

Tags:

Settings

The City slider is a special slider in the Slider Library. This demo has 4 slides: a static slide and 3 simple slides which show different parts of the day. The static slide is over the other slides, so if you switch a slide the content on this slide won’t move. The slider autoplays in every 15 seconds which you can see in the slider autoplay indicator on the top right. You can stop the autoplay if you hover over the slider, also you can switch a slide by using the arrows or swiping.

Slider autoplay settings

Layers

The slider contains lots of image layers. You can see all of your layers in the layer list. Here you can rename the layers if you want by clicking on the edit icon next to the name, also you can change the z-index of the layers.

Layer list of the slider

Animations

Animations and fancy transitions catch the user’s attention, and make them want to spend more time on a page, therefore they are often used on websites in different ways. This slider has lots of animated layers. There are layers which are continuously moving, and there are layers which move if you click on a layer thanks to the layer events.

In most cases, these simple animations don’t need to be maintained or partially changed after a while. However, when you create more complex animations like in this slider, you’ll welcome the possibility to see and manage these complex animations in a simple, easy to use timeline. The timeline uses a visual way to display your layer animations, and the time period where they will be shown. It can be used to adjust the already added animations duration and delay, or to add new animations.

Layer animations on the timeline

Layout

There are many layers on the slides, which are in absolute position. This positioning mode can be useful if you want to decorate the slider like in this case. There is a static overlay over the slides where there are other layers. These layers won’t move away if you go to the next or previous slides.

Responsive

The City slider is fully responsive. The images are smaller, and they look good on smaller screens as well.

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.4 s
Speed Index
0.6 s
Largest Contentful Paint
0.5 s
Time to Interactive
0.6 s
Total Blocking Time
10 ms
Cumulative Layout Shift
0
98

Mobile

First Contentful Paint
1.2 s
Speed Index
1.8 s
Largest Contentful Paint
2.2 s
Time to Interactive
2.8 s
Total Blocking Time
190 ms
Cumulative Layout Shift
0

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


Similar Sliders -

Showcase TemplateCompanyDating