Slide

IN THIS ARTICLE

You can find the Slide layer in the Slide Editor.

In Smart Slider 3 you can find the slide configuration options in a layer window.

Style

Background

The Background section is divided into three categories, depending on which type of background do you want to use.

Video type Pro

Slide Background Video

You can set a background video for your slide here. Only MP4 format is allowed, as it's supported in all major browsers. We recommend optimizing your video as much as possible, aiming for a maximum 4-5MB file size for the optimal loading speed.

⚠️ Warning: Browsers have severe restrictions against autoplaying videos. Learn the details. To avoid the most common problems and ensure that most devices can play the video, it's muted and you can't change that otherwise the video could never play.
You can also set an Image, which will be used as a fallback on devices where the video can't be played for some reason. Additionally, when you set a background image, too, we'll load that instead of the video upon page load, which helps speeding up your site.
Opacity

The transparency of your video.

Loop

Make your video start again after it's finished.

Restart on slide change

Starts the video from the beginning when the slide is viewed again.

Fill mode

Fill mode decides how your video covers like in the slide.

  • Fill: The video will cover the whole slide.
  • Fit: The whole video will be on the slide in the center.
  • Center: The video with its original size will be on the slide in the center.

Image type

Slide Background

You can select the background image for your slide. The image's original size is displayed at the top-right corner.

Image Manager Pro
☝️ Note: If you use the Image Manager the Convert to WebP option won't affect the images.

With the Image Manager you can select device specific images for Desktop Retina, Tablet and Mobile devices.

⚠️ Warning: Setting a custom image for tablet or mobile will not change the height of the slider. If you want to make your slider taller on mobile, use one of these methods.
Focus

You can change the focus point of the image, which will always be visible.

Fill mode

This is how the image fills up the slide. Learn more about the fill modes.

Opacity

The transparency of your image.

Blur

You can blur the image to increase the legibility.

⚠️ Warning: This feature uses CSS filters, which are not supported by Internet Explorer, so the blur won't work there.
Overlay

By default the color is behind the image, but with this option, you can move it up and use the color's opacity to create an overlay.

Color type

Color

The background color of your slide.

Carousel slider type has a global slide background color setting too.
Gradient

You can create a gradient color with this option.

Color end

The finishing color for the gradient.

SEO

☝️ Note: SEO options are not available for Color type backgrounds.

Image Alt [SEO]

The alt tag of your image.

Image Title [SEO]

The title tag of your image.

Spacing

Padding

Creates a padding within the slide. You can use it to leave space for your controls.

Content

General

Slide title

The title of your slide. It's visible in the slide list, and some controls can display it.

Description

The long description of the slide, which can be displayed by the Text bar control

Thumbnail

A thumbnail image that describes your slide. By default it's the same as the slide background image. It's also visible in the slide list, and controls can display this image.

💡 Tip: If you want the thumbnail to reflect the actual slide (with the layers) create a screenshot on your slide and upload it there.
Thumbnail Alt 3.5.0.9

You can set a custom alt tag for the thumbnail image. If you don't set anything, the Slide title will be used as fallback.

Hide on Pro

You can hide the slide on different devices.

Link

Link

You can put a link around the whole slide.

Target window

Specifies where to open the linked document.

Aria label 3.5.0.2

The aria-label attribute, which screen readers can use to introduce the link.

Animation

☝️ Note: This section is only available at the Simple and Block type.
Background Animation
☝️ Note: This section is only available at the Simple type.

Background animations can move the slide background images and colors. They have no effect on slide background videos or layers.

Ken Burns effect Pro

You can enhance your slide background images with a cool zooming and panning effect.

Advanced

Custom lightbox image Pro
☝️ Note: This option is only available when the Backgrounds in lightbox featured is enabled for the slider.

You can pick a custom lightbox image, that will be used instead of the slide background. This way you can use a higher resolution image in the lightbox, while you use a lower resolution image as the slide background which helps keeping your site's speed.

Published

You can prevent the slide from showing up on the frontend or preview.

Slide duration
☝️ Note: This option is only visible if the Autoplay is enabled.

You can override the global Autoplay duration here.

Publish on Pro

You can give a specific date, when you want your slide to show up. So it helps to schedule a slide.

Unpublish on Pro

You can give a specific date, when you want your slide to disappear/expire.

Thumbnail type

If you have a background video on the slide, you can set the thumbnail to show a play icon in front of the thumbnail image at the Thumbnail control to let you know that it's a video slide.

Common issues

1
Changes in the slide are not showing up on the thumbnail

Most of our demo sliders were created with custom thumbnail images. Basically, after the slider was created, we manually created a screenshot about the slide, resized the image and uploaded it as slide thumbnail. So the thumbnail image does not show the current state of the slide, but the uploaded image.

If you want your thumbnail to reflect your slide, you should do the same. Create a screenshot, resize and upload it as the Thumbnail.

2
Thumbnail doesn't get updated when Background image is changed

The way our system works is, that the Thumbnail image is only updated automatically, if you have the same exact image there as what you have at the Background Image option.

If you used a demo slider, our designer often uses different thumbnails from the background, so in those cases you have to replace the thumbnail manually too.

3
Why aren't the publish dates working correctly?

In WordPress we are using the time set at Settings → General → Timezone.

In Joomla we are using the time set at System → Global Configuration → Server → Website time zone.

If your slides get published sooner or later than they should be, check if the timezone settings are correct.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.