Slide 1

Hello, We’re Super Agency!

Let’s turn your idea into a
scalable business!
Slide 2

Explore Our Latest Projects

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Web App

Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes.

Brand Design

Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes.

Mobile App

Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes.

Slide 3
Web App Project

Conversion oriented website, pixel perfect UI & clean code.

Slide 4
Brand Design Project

We build brand identities to elevate your business.

Slide 5
Mobile App Project

We build mobile apps and games for iOS & Android platform.

Hero Slider

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

Description: A hero slider extends the idea of a hero image, allowing you to present multiple hero images and videos in sequence, using captions, transitions, and animation.

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

Minimum version: 3.5.0.0

Tags:

Best features of hero slider

💡 Best features in this slider
  1. Shape divider
  2. Highlighted heading
  3. CTA button
  4. Bullet control

Settings

A hero slider extends the idea of a hero image, allowing you to present multiple hero images and videos in sequence, using captions, transitions, and animation.

Hero headers are among some of the best and most visually appealing trends in web design in recent years, but paired with sliders, they have even more visual punch. When done correctly, hero sliders deliver context and clarity, helping visitors quickly understand what your site is about and what you have to offer. A great hero slider needs great design, and thanks to solutions like Smart Slider 3, anyone can create a beautiful slider with little effort, using features like drag-and-drop, animations, transitions, buttons, and more.

This hero is a full width slider, so fills the 100% width of your page. It’s not an average slider when you check it, because it is a vertical slider, so you can switch slides with vertical dragging, or with the bullets control on the right.

Vertical drag

Layers

The hero slider stays from 5 different slides. You can see a highlighted heading layer, simple heading layers, buttons, images and text layer on the slides. Text layers are specials because you can use your own code inside the layer, so you can add a different style for the texts. In this example there are headings where a part of the text is bold. But you can replace these layers with highlighted heading where you disable the highlight. At highlighted heading you can add different styles for the main text, the highlighted text and the hovered text.

Highlighted heading layer

Animations

Each layer has a good looking incoming layer animation. When you switch a slide, you can see the layers are coming in after each other. The first slide is special because there is a highlighted heading used where the highlight also has a nice underline effect, and the button layer has a loop which calls the visitors attention to click.

Layer animations and timeline

Layout

The 5 slides have different layout and structure, but you can see a curved white shape below the slider. This is the shape divider effect, which you can fully customize, you can change its color, make it smaller, but you can disable it if you don’t like it.

Shape divider settings

Responsive

There are layers which aren’t visible on smaller screens. With hiding a layer you can save space on your slider. In Smart Slider your slide’s height is based on the layers and all the slides’ height are based on your highest slide. So if you have a tall slide on mobile, then your whole slider will be taller. To avoid this you can hide layers on different devices.

Hiding a layer

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 12, 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.022
90

Mobile

First Contentful Paint
1.3 s
Speed Index
2.1 s
Largest Contentful Paint
3.3 s
Time to Interactive
3.2 s
Total Blocking Time
250 ms
Cumulative Layout Shift
0

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

Related Post: 12 Beautiful Full Width Slider Examples

Related Post: Add Beautiful Section for your Website with Shape Dividers


Similar Sliders -

HeadphoneOrganic FoodLawyer SliderFull width WordPress post slider