Slide
Feature 01
One Plugin, Many Powers

Turn your ideas into incredible digital experiences. The most powerful design toolbox to create your next slider, block or page.

Slide
Feature 02
Inspiring Slider Templates

One size doesn’t fit all. That’s why our huge library of 180+ templates has everything you need to make projects that suit your website.

Slide
Feature 03
Layer Animations

Smart Slider uses a powerful animation system to give layers motion and transitions.

previous arrowprevious arrow
next arrownext arrow

Feature Card

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

Description: The Featured Card slider is a special looking slider, that you won't see on every other website. It uses solid colors to make the content stand out, and it has cool features to amaze your visitors.

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

Minimum version: 3.5.0.0

Tags:


💡 Best features in this slider
  1. Shape divider – top
  2. Row
  3. Image layer with 3D mouse parallax
  4. Slide background color
  5. Shape divider – bottom
  6. Bullets and arrows in Advanced position

Settings

People typically use full width sliders because they look great on today’s large monitors.

The controls look very special on this slider. That’s because the arrows surround the bullets. When you enable a control, by default you can select from predefined places at its position setting. In the Pro version of Smart Slider, there’s an Advanced position setting, what you can use to place the controls basically anywhere within, or around the slider.

Arrow control default positioning (top) and Advanced positoning (bottom)

Layers

You can find the most popular layers on the Feature Card slider. There are two headings, a text, a button and an image layer, inside a two column row. Using the button layer, you can create a cool CTA for your slide.

If you check the layout, you’ll also see that it’s full of rounded corners. The image inside the image layer is a png, so here the rounded corners are coming from the image. However, in the row and button layer’s case, the rounded corners are coming from their settings. At the Style tab of the layer window, you can find a Border radius option, what you can use for creating rounded corners.

Border radius setting on the row (left) and button (right)

Animations

The most noticeable effect you’ll immediately see on this slider is the Shape divider. This feature creates the white shapes at the top and bottom of the slider. When you first load the slider, the shapes appear with a nice animation. The Shape divider is above the background of the slide, but below the layers. This helps creating the Feature Card slider’s unique look.

There’s another fun effect on the Feature Card slider. When you move the cursor above the slider, the image reacts to its movement, and turns towards the mouse. This effect is the 3D mouse parallax, what you can enable on any layer.

Layout

The base of the Feature Card slider is a row, that has two columns and a dark background color. When you add a row layer, it always contains two columns, and both columns are 50% wide. In this case, we changed the column width. The first column is 30% and the second column is 70% wide. This allows the image to display in a bigger size, but the 30% width is still enough for the text to show.

Responsive

Rows help creating mobile friendly layouts by breaking the columns into more lines. The Wrap After option of the row defines amount of columns that can fit into a line. By default every row has its Wrap After setting on 1 on mobile devices.

When a row breaks its columns, it always keeps the original column order. In other words, the column that’s the first from the left is going to be on the top. The column, which is the last from the left side will end up on the bottom. If you don’t like this behavior, you can change the column order device specifically at the row.

There are many other options that you can change for tablet and mobile devices, without affecting the desktop layout. For example, the padding, which was greatly reduced to make the slide look better on mobile. We also reduced the font sizes using the Text Scale option.

Default mobile look (left) and optimized mobile look (right) after the padding and font size was set

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.5 s
Largest Contentful Paint
0.5 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.036
100

Mobile

First Contentful Paint
1.1 s
Speed Index
1.7 s
Largest Contentful Paint
1.9 s
Time to Interactive
1.9 s
Total Blocking Time
80 ms
Cumulative Layout Shift
0

Related Documentation: How to place bullets below the slider, with the arrows around them?

Related Post: Add Beautiful Section for your Website with Shape Dividers


Similar Sliders -

Shape Divider SliderReal EstateShape Divider BlockBroken Grid Slider