Slide 1
Elm bonsai
Chinese Elm

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam.

Read More
Product is available in
309
Days
10
Hours
52
Minutes
09
Seconds
PREV
NEXT
Slide 2
Crabapple bonsai
Japanese Crabapple

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam.

Read More
Product is available in
309
Days
10
Hours
52
Minutes
09
Seconds
PREV
NEXT
Slide 3
Larch bonsai
Japanese Larch

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam.

Read More
Product is available in
309
Days
10
Hours
52
Minutes
09
Seconds
PREV
NEXT

Bonsai

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

Description: Use the countdown layer to raise excitement to your new products or services with the help of this modern template slider.

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

Minimum version: 3.5.1.3

Tags:

💡 Best features in this slider
  1. Slider background image
  2. Slide content
  3. Countdown layer
  4. Shape divider
  5. Bullet control

Slider Settings

The Bonsai slider uses the Simple slider type, which is the most common way to display a slider on your website. Simple sliders display one slide at a time, which helps the visitor focus exactly on one message. Additionally, it’s a full width slider, which means the slider fills the screen horizontally. Full width sliders look great on today’s wide monitors, and they’re super popular design elements nowadays.

The image in the background is the a background of the whole slider. It’s not added to the slides individually, but to the slider itself. As a result, the image stays in place when the slides move, which gives a stunning look to the slider.

Slider background image
Slider background image

For navigation your visitors can use the custom Prev and Next buttons on the slides. Additionally, on touch screen devices they can swipe the slider to the direction they want to switch to. If the device doesn’t support touch, a mouse drag can also change slides. There’s also a bullet at the bottom middle part of the slider, which is both for navigation and to indicate how many slides are available.

Creating a Link Action to switch to the Next Slide
Creating a Link Action to switch to the Next Slide

Layers

The most important layer on the Bonsai slider is the Countdown layer. This layer is available in the Pro version of Smart Slider and helps you count down to any date you want to. It’s good to create a product slider or a coming soon page.

Other notable layers are the heading and text layer, which display the textual content of the slide. There’s also an image layer on each slide that shows the product picture.

Every slide of the slider has a CTA button that prompts the visitor to read more about the product. There are also custom buttons to switch slides. Creating such a button is super simple using Smart Slider, as you can set it up in a few clicks. Go to the layer where you want such a custom link, click on the + icon at the Link, go to the Action tab and select Next slide. Once you’re done, press Insert and the button will switch to the next slide when clicked.

Animations

Although it does not animate, the Bonsai slider has a Shape Divider in its bottom. This Shape divider creates the white line at the bottom of the slider.

Apart from the Shape divider, the only animation on the slider is the Main Animation. The Main animation is the simplest animation, and it moves the slide with a nice horizontal movement.

Layout

The base layout of each slide is a one column row that has white background color. Inside this row’s column there are two other rows. Both have two columns: one for the main content and another for the navigation.

Responsive

Smart Slider is a responsive slider, and is full of options you can use to fine tune the look of your sliders on small screens. When you optimize your slider for mobile, it’s recommended that you keep the height below 600px. As a result, your slider will fit nicely to the smallest mobile screens.

To ensure a good mobile fit, we hid the large text layer. Additionally, we reduced the font size of some of the texts. As a result, the slider looks better on mobile.

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on December 7, 2021. For the latest result analyze now!

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.3 s
Largest Contentful Paint
0.6 s
Time to Interactive
0 s
Total Blocking Time
0.8 ms
Cumulative Layout Shift
0
92

Mobile

First Contentful Paint
1 s
Speed Index
3.1 s
Largest Contentful Paint
1.6 s
Time to Interactive
100 s
Total Blocking Time
3.3 ms
Cumulative Layout Shift
0

Related Post: Introducing Countdown Layer

Related Post: Do you Need a Product Slider for your Webshop? Yes, you do!


Similar Sliders -

Coming Soon