Slide
Little porcelain
Christmas Tree

Dui porta semper enim nullam vel at quisque. Facilisis nulla phasellus mauris elementum aliquam. A nec sed magna nisl ipsum feugiat tortor sit.

Slide
Little porcelain
Santa's Bag

Dui porta semper enim nullam vel at quisque. Facilisis nulla phasellus mauris elementum aliquam. A nec sed magna nisl ipsum feugiat tortor sit.

Slide
Little porcelain
Green Present

Dui porta semper enim nullam vel at quisque. Facilisis nulla phasellus mauris elementum aliquam. A nec sed magna nisl ipsum feugiat tortor sit.

previous arrowprevious arrow
next arrownext arrow

Christmas Ornament Shop

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

Description: The Christmas Ornament Shop slider is the perfect choice to give your site a nice Christmas themed look and perpare for the holidays.

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

Minimum version: 3.5.1.12

Tags:

Slider Settings

The Christmas Ornament Shop slider uses the Simple slider type and it’s also full width. So, it looks like any typical slider you can see on website. It displays one slide at a time which is good for two reasons. First, it gives you plenty of space to display content. Second, seeing one slide at a time helps the visitors focus on the message.

For navigation people can swipe through the slides with their cursor or hand. If they’re on desktop or tablet, they can use the arrows located on the sides of the slider. If the visitor is using their phone, they can use the bullets located at the bottom of the slider as another navigation option.

Layers

The Christmas Ornament Shop slider uses the most basic layers. There are heading, text, button and image layers. There’s one special layer on each slide, creating the ribbon decoration. That’s an Image area layer. What differentiates it from the simple image layer is that an image area layer can cover a given area with the selected picture and can crop parts of the image if needed.

Image (left) and Image area layer (right). The Image area layer can crop an image to make it fill a given area.

Animations

There are some spectacular animations on the Christmas Ornament Shop slider. Let’s start with the most obvious one: it’s the Particle effect. Despite having many cool effects to choose from, we decided to go with a custom particle effect. As a result, we were able to simulate a snowing effect for the slider.

The other effects on the slider are more subtle animations. You can see an incoming animation on all layers to make their entrance more interesting. There’s also special background animation, Slices – Single. This animation makes the current slide move out followed by a solid color which then reveals the next slide below.

Layout

The layout of the Christmas Ornament Shop slider is mostly super simple. The slides are based on a two column row structure. However, there’s an interesting layout solution you can spot, which is the decoration ribbon. It’s an Absolute positioned layer located in the right column. We aligned it to the middle of the column and gave it a custom size to ensure that it fills the whole slider.

Responsive

Smart Slider is a responsive slider and it provides several tools to create an awesome looking slider for small screens. One of the most popular responsive tools is the Font Resizer which allows adjusting the size of the text on the currently edited device, without affecting the other devices.

The other cool feature is the ability to hide layers that are not needed for a particular device. For example, at the Christmas Ornament Shop slider we hid the ribbon layer on mobile.

Core Web Vitals

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

99

Desktop

First Contentful Paint
0.3 s
Speed Index
0.9 s
Largest Contentful Paint
1 s
Time to Interactive
0.8 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
80

Mobile

First Contentful Paint
1.1 s
Speed Index
2.7 s
Largest Contentful Paint
4.2 s
Time to Interactive
4.1 s
Total Blocking Time
210 ms
Cumulative Layout Shift
0

Related Documentation: Layer animation

Related Post: 15 Beautiful Full Width Slider Examples