Spring Bouquet
BEST SELLER
Spring Bouquet

Nulla tempus sollicitudin dui, ut vehicula lacus porta vel duis urna ligula luctus at feugiat a lacinia ut.

Seasonal Bunch
SPECIAL
Seasonal Bunch

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet.

Tulips by the Pound
ON SALE
Tulips by the Pound

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Lorem ante, dapibus in.

Spring Bouquet
Seasonal Bunch
Tulips by the Pound
previous arrow
next arrow

Flower Shop

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

Description: Smart Slider is a great alternative for creating a full screen slider for your website. It's easy to use and has many stunning features you can use.

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

Minimum version: 3.5.0.0

Tags:

Settings

The Flower Shop is a full page slider, so it fills the 100% width and height of your browser. The slider stays from 3 slides, and it autoplays every 12 seconds. You can see the slider autoplay indicator in the top right but you can switch slides by dragging or with the thumbnails on the right as well.

Layers

The slider has simple layers. There are 2 heading layers on the top, then a text layer comes, and finally 2 button layers. On the right side of the slider you can see more image layers which are on the top of each other. And in the top right there is a button layer which has rounded corners and displays the price. The image layers are in absolute position, which can be useful at decorating the slider.

Layer list of the Flower shop slider

Animations

The textual layers are coming in with a nice looking reveal animation. This kind of animation looks good, and cheers up your website. The images also have layer animations which are coming after each other. You can harmonize these animations together in the timeline.

Timeline

Layout

The slider has a simple layout: there is a row with 2 columns. The left column contains the textual layers, the right the images and the button. You can see the autoplay indicator on the top right, and the thumbnails on the right side of the slider. With the thumbnails you can switch slides. They are rounded, and have an opacity if they aren’t active.

Setting of the thumbnails

Responsive

If you check the slider on mobile you can notice the images in absolute position are hidden. They are used only with design purpose, and with hiding them you can save space on the slider in smaller views. Also, you can see the texts are smaller. You can set the text sizes with the text scale, which is a device specific setting.

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

Mobile

First Contentful Paint
1.1 s
Speed Index
1.8 s
Largest Contentful Paint
2.1 s
Time to Interactive
3.1 s
Total Blocking Time
140 ms
Cumulative Layout Shift
0

Related Post: What is a Full Page Slider and How to Use it?

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


Similar Sliders -

NextchatPhoto App SliderCosmeticsMovie Slider