Slider tutorial - Showcase type - Sponsors
This tutorial is for Smart Slider 3 pro version only!
In this tutorial we are going to create a slider like this Smart Slider 2 demo slider, just with a continuous animation.
The result will look like this:
Creating the slider
First let's create a new Showcase slider:
Currently, its dimensions doesn't matter. Add some images, and set the slide size. I'll use 100x100px large images, so I'll set the slide size to match this:
The slider width (Slider settings → Size tab) can be anything above 300px but to achieve the best look, the height should be around 120px. I'm going to set the width to 600px and the height to 116px.
To have the same look, some css codes need to be added to the Slider settings → General tab → under Showcase slider type - Slider: CSS
box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.1) inset, -1px 0px 5px rgba(0, 0, 0, 0.1) inset; background: rgb(237, 240, 245) none repeat scroll 0% 0%;
Let's remove the arrows, as for this slider, they are not needed.
If you would like to create the same slider as in the Smart Slider 2 demo, do not remove the arrows but rather select one and customize it as you would like to.
When this is set up, add your slides using the Add image slide button or if you have the images in your computer, you can simply drag'n'drop them into the
Autoplay and animation
Set up the Autoplay at the Slider settings → Autoplay tab. Set the interval to 1MS, and don't allow the autoplay to be stopped.
If you would like to create the same slider as in the Smart Slider 2 demo, set the autoplay interval between 3000MS and 10000MS.
Now the only thing remained is to smoothen the animation. Since the Expert mode is already turned on, the animation can be adjusted at the Slider settings → General tab → under Animation settings
Let's set the Properties → Duration to some large number. The larger the number, the slower the animation will be, and the shortest animation that looks smooth is 2000MS, and set the Easing to linear to achieve the smoothest result.
If you would like to create the same slider as in the Smart Slider 2 demo, set the Properties → Duration to a value between 800MS and 1500MS.
Preview your slider, and if you like the result, you can save and publish it.