(555) 989 - 4588

Need help renting online? (555) 989 - 4588

Search, book and rent a car easily
Best Rent Prices
Mileage Unlimited
Reserve Anytime
24/7 Support
Golf
Volkswagen Golf

Petrol

5,5 l / 100 km

Automatic

5 seater

Zoe
Renault Zoe

Benzin

20 kWh

Automatic

5 seater

Fiesta
Ford Focus

Petrol

5 l / 100 km

Manual

5 seater

Car Rental

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

Description: The Car Rental template is a modern looking slider that brings life to your website. It lets you showcase your products or services in an interesting way.

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

Minimum version: 3.5.1.4

Tags:


💡 Best features in this slider
  1. Content on the Static Overlay
  2. Content on the regular slides
  3. Absolute positioned layers
  4. Shape Divider
  5. Bullets

Slider Settings

The Car Rental template is a simple type slider, which is the most common type of slider you can see on the web. Additionally, it uses the full width layout and that’s another very common usage of sliders. People love elements that fill the whole browser width horizontally, and content, especially images look great in full width on large monitors.

As the Car Rental template is a slider, it has many navigation options to allow visitors to see the other slides. The most obvious way of navigation is the orange CTA button that prompts the visitors to see the next car.

The CTA button uses Link Actions to go to the next slide

The other type of navigation is the bullets on the bottom of the slider. In fact, the bullets server two purposes on sliders. First, they are great way to navigate to a specific slide. Second, they show how many slides there are for visitors to see. That’s because there’s a bullet created for every slide, so if you have 3 slides in the slider, there will be 3 bullets. Apart from these navigation options, the slider also supports touch screens. As a result, touch screen users can swipe on the slider to switch slides.

Layers

The Car Rental template uses the most common layers to display its content. There are heading, text image and button layers on each slide.

Animations

There are a few interesting animations on the Car Rental template. First, there’s the Shape Divider at the bottom of the slider. We choose an interesting shape called “Curve 3”.

Apart from the Shape Divider, there are layer animations on the slides. The layer animations move in both the colorful shapes behind the main content, and also the content block on the right side.

Layout

The Car Rental template’s layout is quite interesting. Viewing the template it’s hard not to notice that the left side of the content stays still, while the right side moves. We achieved this behavior by placing the left side content on a Static Overlay. The Static Overlay is a special kind of slide that is above all other slides in the slider, and doesn’t move away. So, it’s perfect to create “fixed” content above your slides.

Static Overlays are marked with a Static Overlay badge in the Slide List

The right side contents are regular slides. Their content has a maximum width and it’s also aligned to the right, to ensure that they stay out of the way of the Static Overlay’s content.

Alignment and Max Width settings on the Row

The Static Overlay’s content is based on a two column row. The actual content layers are in the left column, which means they always take up maximum 50% of the slider’s width.

Responsive

Smart Slider is a responsive slider and offers you all the flexibility you need to create awesome sliders for mobile. At the Car Rental template we made some special measures to ensure the slider’s good look on small screens.

On the Static Overlay, we set a large padding to the second, empty column. This ensures that the the content slides have enough space to display without the Static Overlay covering them. Since the Static Overlay’s padding enlarges the whole slider, all that was left to do in the other slides is to change the Vertical Align to bottom. As a result, their content displays at the bottom of the slide, below, but not under the Static Overlay’s content.

The Vertical Align is set to bottom on Mobile

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on March 23, 2022. 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
88

Mobile

First Contentful Paint
1 s
Speed Index
2.1 s
Largest Contentful Paint
3.6 s
Time to Interactive
3.5 s
Total Blocking Time
150 ms
Cumulative Layout Shift
0

Related Documentation: What is the Static Overlay?

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

Static SliderStatic testimonialDatingSplit Slider