Digital Art

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

Description: If you need to showcase your artwork in a modern slider, look no further. The Digital Art template is a great choice to display your art and have your visitors enjoy it.

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

Minimum version: 3.5.1.7

Tags:

Slider Settings

The Digital Art template is based on the Carousel slider type. The carousel is one of the slider types of Smart Slider which can display more slide at a time. It’s also a full width slider, which is very popular because it looks great.

Another interesting feature displayed on this template is the slider background image. Slider backgrounds sit behind all slides of the slider without moving away. So its perfect to give a nice touch to any slider you create.

Slider background image, located at the bottom of the slider settings page

There are bunch of navigation options available on this slider. The most obvious are the arrows sitting on the left and right side of the slider. They’re super great for slide to slide navigation and make it simple to navigate the slide. Another navigation option are the bullets, which also indicate how many slides there are to see. Swiping on touch screens and dragging with the mouse is also available to switch slides.

Layers

The Digital Art template uses the most basic layers: image, heading, text and button. But as you can see even with such simple layers it’s perfectly possible to create a stunning slider.

Animations

The most interesting aspect of the Digital Art template is its animation. The template has both layer animations and events. In Smart Slider you can use events to trigger layer animations on various actions. Like at this template’s case hovering on the slide makes the two rows appear. Not hovering on the rows anymore makes them hidden again.

Events on the row

As touch screen devices don’t have hover actions, hover based events turn into touch based events on these devices. So, for example, a mobile user can touch the slide to reveal the layers and touch somewhere else to hide them.

Layout

The base layout of each slide is two rows. One row is at the bottom with it’s Stretch option enabled, which pushes the other row to the top. At the bottom row’s column the content is vertically aligned to the bottom. This makes the layers appear at the top and bottom of the slide.

Vertical align on the column

Responsive

The basic responsive behavior of the Carousel sliders is that as they display as many slides as can fit into the current slider width. Then, as the screen gets smaller, the slide that can no longer fit disappears and the remaining space is divided between the remaining slides. As a result, the Carousel slider’s slides have approximately the same size on desktop, tablet and mobile devices.

Because of this, it’s generally very easy to make Carousels look good on mobile. Additionally, they usually need little to no responsive adjustments. But if you feel you need to make changes, you can always adjust the font size or even hide some layers you don’t want to show on mobile.

Core Web Vitals

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

99

Desktop

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

Mobile

First Contentful Paint
1 s
Speed Index
2.3 s
Largest Contentful Paint
3.1 s
Time to Interactive
3.9 s
Total Blocking Time
100 ms
Cumulative Layout Shift
0.026

Related Documentation: Layer animation

Related Post: 9 Inspiring WordPress Carousel Examples


Similar Sliders -

Product CarouselInfinite Logo CarouselWordPress Post Slider CarouselCarousel with Lightbox Slider