Main
Get Started
Smarter way to
renovate
your home

Sed lacinia sed ut rhoncus. Vestibulum nisl nullam tincidunt praesent felis interdum libero. Et cum amet, ornare nunc felis lorem libero nunc.

Construction
Painting
Roofing
Gardening
Construction
Construction
Smarter way to
construct
your home

Mecenas malesuada lobortis convallis justo ante dictum ipsum sollicitudin dictumst eget ligula.

Elit scelerisque cursus facilisi inceptos, congue varius arcu morbi scelerisque eget ultricies facilisis. Placerat ultricies facilisis hymenaeos curae.

Painting
Painting
Smarter way to
paint
your home

Accumsan gravida viverra. Torquent ornare sagittis volutpat interdum quam magna cursus blandit, bibendum hac At fermentum facilisis convallis.

Habitant parturient erat erat viverra Tempor placerat aliquam. Porttitor facilisi habitasse semper malesuada ridiculus ante.

Roofing
Roofing
Smarter way to
roof
your home

Vivamus nisl, hendrerit vestibulum lectus nullam hac nostra cubilia tortor. Ridiculus dolor at vestibulum dignissim facilisi posuere posuere.

Proin nostra aliquet erat nulla Hendrerit penatibus magna erat tempor felis habitasse. Primis.

Gardening
Gardening
Smarter way to
garden
your home

Vestibulum faucibus erat sit nunc dui Neque facilisis aptent posuere laoreet ad enim consectetuer.

Senectus at purus velit curae; habitant fermentum hac conubia aliquet pharetra tristique fusce nulla inceptos nam senectus.

Renovation

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

Description: The Renovation slider is a great looking, minimalist slider that helps you display your services in an engaging way.

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

Minimum version: 3.5.1.7

Tags:


💡 Best features in this slider
  1. Highlighted heading layer
  2. Columns with Link Action
  3. Absolute positioned decorational layers
  4. Shape Divider
  5. Bullets

Slider Settings

The Renovation template is a simple slider that takes up the full width of the browser. Such sliders are popular in modern web design, because they look great on any screen. What’s also cool about this template that all of its slides use different color scheme. As a result, it’s a colorful addition to any modern sites.

One of the most interesting features of this slider is that if its top is not visible during slide switching, the slider scrolls to it. This way if your smaller screen users check out the full slide, they’ll be at the top of the next one after they switched forward. Small features like this can create a super cool experience for visitors. How to achieve this scroll to top behavior? Change the value of the Scroll to Slider option to Top – When needed.

Scroll to Slider configuration

Layers

You can find the most common layers on the Renovation slider. There are headings, texts and images to display content. You can also find a special layer on each slide, the Highlighted heading. It’s a great way to make some content stand out, and this template uses it to highlight the keyword on each slide.

There’s also a custom navigation on each slides using Link Actions on the columns of a row. This navigation is not only looks great, but it’s very convenient as well. Also, there are bullets available for navigation.

Link Action on the first slide’s column

Animations

Smart Slider has many amazing animations and effects. To make the Renovation template more interesting, we added the layer parallax effect to some of the layers. So when you move the mouse over the slide, some layers make a subtle movement. As a result, the slider look more interesting.

At the bottom of the slider you can find a cool looking Shape Divider. It uses one of the new shapes, Paper 4.

Shape Divider settings at Animations tab
Shape Divider settings at Animations tab

Layout

The base of all slides is a two column row. By default when you add a row, it has two columns, each having 50% width. However, you can adjust the width of the columns to make their sizes fit better for what you’re creating. On this template we split the columns 41-59%, so the right column is slightly wider than the left.

Custom column width

Another interesting thing is that we used Absolute positioned layers to decorate the slider. Absolute positioned layers are floating on the slide, without taking any actual space which means you can place them anywhere. This makes them perfect for creating decorative stuff on the slide.

Responsive

Smart Slider is a responsive slider with many tools to help you make your slider look perfect on any device. You can adjust font sizes to make the texts fit better into small screens. Additionally, you can break a row’s columns into separate lines to make more room for the content. Alternatively, you can also hide layers to make the content fit better for small screens.

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on August 24, 2022. For the latest result analyze now!

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.8 s
Largest Contentful Paint
0.5 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
2.5 s
Largest Contentful Paint
2.3 s
Time to Interactive
5.5 s
Total Blocking Time
160 ms
Cumulative Layout Shift
0

Related Post: Everything You Need to Know about the Parallax Effect

Related Post: 15 Beautiful Full Width Slider Examples


Similar Sliders -

Particle CarouselVirtual ConferenceBroken Grid SliderCourses