Slide 1
Excellent Education Program
Innovative Methods of Teaching

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient.

Slide 2
Learning Through Play
Devoted to the Early Education

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Slide 3
Learning Through Play
Find a Class for your Children

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis.

previous arrow
next arrow

Free Layer Slider

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

Description: If you’re looking for a really simple free slider with layers then this is the best choice for you.

Free: Give Smart Slider 3 a try for free. Download now!

Minimum version: 3.4.1.6

Tags:

Settings

Smart Slider 3 free version is great if you would like to create a layer slider for free. In the free version you can choose from 6 different types of layer: heading, text, image, button, even you can create a Vimeo or YouTube slider. So with Smart Slider 3 you can build your unique and colorful slider with using layers.

You can import this Smart Slider 3 template from the Template Library and after that you can customize it. You can change the background and the layers too, add a new slide or set a slider autoplay.

There are 3 ways to switch the slides: with mouse drag, with the bullets on the bottom and with the arrows. You can set these controls at the Controls tab of the Slider settings. You can customize them, you can change their colors, or put into another place.

Settings of the Arrow control
Settings of the Arrow control

Layers

This slider uses 4 different types of layers: there is an image layer on the top, after 2 heading layers are, then a text layer comes, and finally a button layer. Every layer is customizable, for example at the heading or text layer you can change the font family or color, you can use margins or padding and set a little shadow or a background. Actually, you can customize everything that people usually want to change. And if it isn’t enough, if you write a custom CSS there is an option to use this class at your layer.

An important part of the slider can be the button layer on the bottom which can call the visitors to take an action and click on that. With the button you can navigate them to another page. Buttons can also be important if you create a Post slider, and put the Post url variable with a Read more text on the button, and the user can go to the actual post and read it. This button layer has a green color with a small opacity, you can customize this color in the Style tab of the layer window.

The background of the button layer has a small opacity
The background of the button layer has a small opacity

The background image has a black overlay with a little opacity. This is an important setting which makes the text more legible, and the visitor can focus on the layers and not on the background.

Animations

Every slide moves with a horizontal animation at the slide switching. This animation is the main animation of the slider which you can set to vertical or fade at the Animations tab of the Slider settings.

Main animation settings
Main animation settings

Layout

The slider was built with default layers which works like a page builder, and it is enough if you put your layers with a simple drag & drop on the slide. You can even use columns and rows which can help you make a good structure. The layers are under each other, and looks good on every device.

Responsive

The slider is fully responsive, and each layer is visible on smaller screens. Using the text scale option you can make your text smaller or bigger in different screens, and this size won’t change on other devices.

Text scale option
Text scale option

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.3 s
Speed Index
0.4 s
Largest Contentful Paint
0.9 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
93

Mobile

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

Related Post: Everything You Need To Know About YouTube Slider

Related Post: Why do You Need a Video Slider on Your Website?


Similar Sliders -

Layer SliderMuseum website landing pageCreate section with blocks and slidersTestimonial Thumbnail