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.
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.
Related Documentation: Layer animation
Related Post: 10 Beautiful Full Width Slider Examples