Settings

At the showcase slider you can see multiple slides together. The active slide is in the middle, but you can switch to other slides by clicking on them or with a simple mouse drag. The non active slides are rotated by 45° and are scaled to 80% of the original size. With these settings your slider will be better looking and clearer, and you can focus on the active slide.

You can navigate horizontally, and there is the carousel option turned on. This means that the slides will cycle through continuously without stopping at the last slide, so after the last slide will come the first one. A simple dark grey background image is used which you can easily change to another image or you can pick a background color at Slider settings → General tab → Slider Design.

This showcase sample slider uses the boxed layout so the slider can be as big as the container it’s in. So you can use it easily in your theme, it will fill the area where you put its code.

Layers

Each slide has the same layout, and layers: an image layer on the top, 2 heading layers and an area layer. The Read more text makes an interaction with the visitor, you can put a link there and the visitor can navigate to another page or post. Also, you can see there is a line below the Read more text, which is a 2px height area layer. You can use it as a separator or a cool design element.

If you click on the active slide, a lightbox will appear with the background image. With a lightbox you can open images, videos or a page in iframe. You can use it without breaking your theme layout, because the lightbox appears above the current page, not within.

Animations

In the Showcase sample slider you can see a layer parallax effect which is based on the mouse cursor position. With this parallax effect your slider will be more powerful, and can make the illusion that the layers are live. If you hover on the slide you will see that the layers will move in a different direction.

Layout

Each slide uses the same layout, there is an image on the top right, and 2 rows below it. In the first row is the heading layer, and the other heading and the area layer are in the second row. At the top row the stretch option is enabled so fills the vertical area of the slide, and puts the image on the top and the other row on the bottom.

Responsive

If you check the slider on mobile, you will notice that the second row with the Read more text is missing because it is hidden on mobile which you can save space, and your slider won’t be too big. But if you want to enable these layers, then open the layer list, find the row, and enable it on mobile at the Style settings of the row.

Related Post: Add Lightbox Slider to your WordPress site

Related Post: How to Create Beautiful Responsive Image Slider?

The post Showcase Simple appeared first on Smart Slider 3 — WordPress Plugin.

The Photo Story is a full width image slider, you can easily use it on your photography page. Each slide has a background image which can be your photo, and you can link a story and navigate to your blog.

The slider uses the full width layout so it fills the horizontal area of the browser. When you switch a slide the next image will fade in. This fade animation is coming from the Main animation. You can set or change it in the Slider settings → Animations tab.

The slider doesn’t use any controls. The arrow that you can see on it are image layers, and are linked with link actions which you can navigate to the next or previous slides.

Layers

The slider uses basic and simple layers: headings, and images. They are ordered in rows and columns. You can find all of the layers in the layer list. You can fully customize them. These layers were added manually into the slider. If you want more than 3 slides, then you can change the “03” to “04” which you can easily do in the layer window.

The layers have important roles in the slider. They aren’t just content, but you can also navigate with them. With the 2 rows where the previous and next titles are you can navigate with link actions.

Animations

The best feature of this slider is the text animation on the big heading at the bottom. When you switch slides, the text will move with a nice animation. You can customize this animation if you click on the layer → go to the layer window → Content tab. Here you can find a text animation section, where you can reach the animation manager. You can set the modes where the text can move, the duration or the transform.

Layout

At first sight you might think the slider uses a complicated layout. There are a lot of rows and columns in each other. The layer list can help you to find out the structure. Also, you can open or close a row or column group with the small arrows near their name which you can make the layer list simple.

Responsive

The slider is fully responsive. 2 columns are hidden on mobile devices, so you can see only the arrow images. In Smart Slider your slide’s height is based on the layers and all the slides’ height are based on your highest slide. Since this slider doesn’t contain too many layers, then it will be small. With using paddings, you can make the height taller which you can set at the Slide settings.

Related Post: How to Create a Cool Text Animation

Related Post: How to Create Beautiful Responsive Image Slider?

The post Photo Story appeared first on Smart Slider 3 — WordPress Plugin.

Sliders are the most widely used design elements on websites. They are usually the first parts of the page that the visitor sees when they arrive. People use sliders to showcase their most important content. Since sliders are so important parts of the site, they often have some kind of inner navigation. For example arrows or bullets but if there are many slides to see, arrows are a bit uncomfortable to use. Bullets are slightly better, but they’re hard to use on mobile devices. This is why slider developers came up with the idea to create a thumbnail slider.

Thumbnails are one of the best navigation elements in a slider that you can use, and in Smart Slider 3 you can easily create a slider with thumbnails. At the thumbnail control you can turn it on and simply customize it. You can even upload a picture, so you don’t need to use the same image as you have used in the background.

Layers

Each slide has the same structure and layers: there are 2 headings on the top, after an image comes, and then a text layer. The first heading is uppercased which you can set at the Style tab of the layer window under the More button.

Animations

Everyone loves animations on a website and on a gallery slider, they can make your page more powerful. Besides the main and background animations in the Pro version of Smart Slider 3 you can put animation on every layer. In this demo slider you can see the same animations coming one after another on every slide.

You can check every layer animation in a visual timeline, where you can set the delay, the duration and the sequence. If you click on the animation on the timeline, it will open the layer window animation tab where you can edit the selected animation. Pressing the space key will start the animations, so you can see a preview of the animations.

Layout

All of the layers are in a 1 row 1 column structure. The row has a white background, and the column has a 2px border which gives a frame to the content. The content layer has a maximum width so the white box will have the same width on bigger screens.

Responsive

All of the layers are visible in smaller screens, just in this case they are smaller. You can customize the font size with the Text scale option on smaller screens. Also, by default the thumbnails are hidden on mobile, but at this slider we have enabled them, so they are visible, and the visitors can navigate between slides.

Related Post: Create A Responsive Thumbnail Slider

Related Post: How to Create Beautiful Responsive Image Slider?

Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro

The post Thumbnail slider appeared first on Smart Slider 3 — WordPress Plugin.

Simple but elegant design elements are the future of web design. This applies to sliders and galleries, too. This simple Image Slider is a great way to display an image slider on any website. It’s a boxed slider, which makes it perfect to publish inside posts or any non-full width sections. The slider’s structure is quite simple, as it has three slides only. The visitor can go through every slide using the arrows, bullets, swiping or dragging.

Layers

Each slide has a short caption that describes the image of the slide. The font color of the caption is white, and there’s an opaque dark background behind it. This ensures that the text remains legible regardless of the image behind it. The font family is Raleway, which is easy to read, especially in such a big size.

Animations

When you switch a slide with a mouse drag or with the arrows, the next slide fades in. This fading effect is the main animation which you can customize at the Animations tab of the Slider settings. It can be a horizontal, a vertical animation, or you also can disable it if you don’t need that animation.

Layout

At the bottom of the slider there’s a dark shadow. It’s created by the Shadow control feature. There are seven predefined shadows, and in the Pro version it’s possible to upload a custom image. Just like every control, shadows can be hidden on desktop, tablet or mobile devices. Shadows are great to make the slider pop off the page giving the impression that visitors can physically interact with the slider. Shadows also help to state hierarchy between the slider and the rest of the page. They make the slider appear above the rest of the page content.

Responsive

Thanks to default positioning, the caption remains legible on mobile. The caption is positioned to the the bottom-left corner of the slide on big screens. But on small mobile screens, the caption is moved to the center of the slide. This small change improves the look of the slider on small screens.

Related Post: How to Create Beautiful Responsive Image Slider?

The post Image Slider appeared first on Smart Slider 3 — WordPress Plugin.

This slider is a simple image slider where the image changes automatically. There are large thumbnail images you can use for navigation. This allows you to preview all images in the slider and pick those the visitor is most interested in. The currently viewed slide’s thumbnail is clear and looks like the slide background picture but the other slide thumbnails are darkened which gives a modern look to the slider. Besides the thumbnails, visitors can navigate by swiping from slide to slide.

The slider has a slider autoplay setting. The visitor can start and stop it with the solid autoplay icon at the top right corner. Allowing the user to start the autoplay gives them control over it which is favorable by them. So how can you set up an autoplay like this? Go to Slider settings → Autoplay and configure the autoplay the way you want to. Set the autoplay duration and any other setting to your liking. Configure its look to match your slider, position it where you prefer to have it and you’re done. The visitor can now start and stop the autoplay when they choose to do so. They’ll love having so much control over your slider while viewing your beautiful pictures!

Layers

Creating an image gallery slider does not always mean you want to use words. It’s perfectly possible to create a beautiful image slider without a single line of text. This Autoplaying thumbnail slider is a great example for this. It’s a very minimal slider, with zero layer, but it looks elegant and professional.

Animations

When you switch a slide, you can notice the background animation. You can change this animation at the Slider settings → Animations tab. Now 2 types are selected, but you can change it if you want.

Layout

The slider is minimal, below the background images you can see the thumbnails, and on the top right you can notice the autoplay button which you can start or stop the autoplaying.

Responsive

The thumbnail bar can be scrolled through by swiping or dragging which is very convenient for both big and small screen users.

Related Post: How to Create Beautiful Responsive Image Slider?

Related Post: Create A Responsive Thumbnail Slider

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

The post Autoplaying Thumbnail Slider appeared first on Smart Slider 3 — WordPress Plugin.

The Blur slider is a special looking simple type slider. A simple type slider means the common look of the slider, which displays one slide at a time. Additionally, it’s a full width slider, which makes the special blurring effect look so stunning.

What makes this slider look so special? It’s the fact that on each slide you see a blurred background image, then in a couple of seconds, the sharp version of the image appears in the middle. It’s like the image isn’t blurred, and more vivid in the middle.

Creating such effect is simple, but you’ll need two images to achieve it. First you need the blurred image, to use it as the background image of the slide. It’s big enough to fit into a full HD screen. You can blur the image with your image editor, and apply the dark overlay. Or, you could use the Blur and Overlay options available in Smart Slider. Then, you’ll need another image, which isn’t blurred or darkened. This image should be a crop from the middle of the large image.

Layers

There aren’t many layers in the Blur slider, but you can find the most essentials. There’s a heading layer, what you can use to create a nice headline. You can put longer, descriptive text into the text layer. Creating a call to action button is super important, as it helps a lot with conversion. We’ve prepared a button layer for you in the Blur slider template. Additionally, there’s an image layer where you can place the cropped image.

Animations

The Blur slider template is rich in animations. The first animation you’ll see when you open the slider is the layer animation. This animates in the layers. The layer animations on the layers have two different behavior. The image layer simply fades in, while the textual layers move in from the right.

The second animation you’ll notice is the 3D parallax effect on the image layer. As you move the mouse cursor above the image, it reacts to it with a cool movement. To enable this effect on a layer, first you need to turn on the 3D parallax at the Animations tab of your Slider settings. Then you’ll need to set the parallax at the layer where you want to use it. The last animation is the Horizontal Main Animation, which you’ll see during slide switching.

Layout

Although you can quickly import any slider template, you can quickly build a layout like the Blur slider’s. First, you need to set a maximum width to the Content layer, then align it to the right. This will put the content to the right side of the slide. Next, add an image layer in Absolute position, and move it below the Content layer.

Responsive

In Smart Slider, aligning happens from the parent element. So, if you want to move your layers up, look for the Vertical align option on their parent. Similarly, you can align the layers horizontally from the parent as well. Additionally, this Inner align option is device specific, as demonstrated on this template. On desktop the texts are left aligned, whereas on mobile they’re centered.

The other responsive adjustment you can find on the Blur slider template is related to the font sizes. Using the Font resizer you can set a smaller, or a bigger font size for your texts on mobile. This is helpful to create a better looking layout on mobile. Additionally, you can hide any layer on any device. On the Blur slider template, we hid the image layer on mobile.

Related Post: How to Create Beautiful Responsive Image Slider?

Related Post: Everything You Need to Know about the Parallax Effect

The post Blur Slider appeared first on Smart Slider 3 — WordPress Plugin.

In the free version of Smart Slider 3 you can easily create a slider with thumbnails, you should just turn on the Thumbnail control at the Slider settings. Thumbnails are great navigation elements, and they also can show a preview of your slides. Usually you can navigate with arrows or bullets, but you have the option to navigate with your keyboard or with a mouse drag or scroll.

In Smart Slider 3 you have the option to autoplay your slider, so the slider can switch its slides automatically after a period of time, which is called autoplay duration. You can enable this setting and configure it at the Slider settings → Autoplay tab.

Layers

This slider is based on the images and thumbnails, and hasn’t any layers. However, if you want to use a layer, with Smart Slider you can cheer up your slider with layers.

Layers are containers to help you tell your story. For example you can use a heading layer to show the image caption, or show a button to direct the visitor to a specific page. You can also add extra images as layers for example to show a Facebook icon with a link on it. And there is a YouTube and Vimeo layer to display videos from these sites. And if you display a video, you can change the thumbnail type, and it will show a play icon.

Animations

Slide switching can be horizontally or vertically, and you can set the main animation direction as well. Even the smallest animation gives a nice touch to the thumbnail slider. Smart Slider 3 offers lots of nice animations which play when the slides change. The most favored animation is the simple fade. This is the effect which doesn’t just animate the background images but the layers as well. The horizontal and vertical Main animation is often used, and these animations are highly touch friendly. While swiping on the screen, it’s possible to preview the nearby slides. Since they’re Main animations, they move the layers with the background image.

Layout

You can see the arrows on the left and right side of the images, and thumbnails below them. You can use these controls to switch slides. The thumbnails shows a small preview of the actual slide.

Responsive

The arrows and thumbnails are available in the mobile view as well, but they are smaller, so the visitors can see there are more available slides, but the thumbnails aren’t too big or small. But if you don’t like them, you can disable the control on smaller view, also you can add a custom image size.

Related Post: Create A Responsive Thumbnail Slider

Related Post: How to Create Beautiful Responsive Image Slider?

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

The post Free Thumbnail Slider for WordPress appeared first on Smart Slider 3 — WordPress Plugin.

Settings

The Flickr Slider template is a simple boxed slider. It’s a great choice for creating image galleries which you can display in your posts. There are arrows on each sides of the slider, which help visitors browsing the images. Also, mouse drag and touch controls are available for the same purpose. The slider has Boxed layout, which makes it fit perfectly into the post content.

The most interesting part of the Flickr slider is the Text bar control at its bottom. The Text bar is a special kind of control, that can display the title and description of the currently viewed slide. As a result, you need to set it up once, and every slide will copy the layout. This gives the flexibility of dynamic slides for your non-dynamic content as well.

Layers

There are 4 layers on this slide to display content: 3 headings and 1 image. On the left side you can find the tag image, and next to it two tags related to the photo. The Heading layer on the right side displays the date of the image.

Animations

The Flickr slider doesn’t have any layer animations. For slide switching it uses the Main animation. This effect can move the slide backgrounds and the layers simultaneously. As a result, it creates a nice and smooth effect during slide switching.

Layout

While the Flickr slider’s layout is super simple, it looks special, because the layers appear on opposing sides of the slide. This happens, because the base of the layout is a two column row. In the first column we used left align, to place the content on the left side. In the right column, however, we used left align. As a result, the single heading layer shows up on the left side.

Responsive

Smart Slider 3 is a responsive slider. In fact, it has exceptionally good responsive behavior. As a result, every slider you create is responsive, and look great on any device. Additionally, you have many cool options to fine-tune the responsive look.

In case of the Flickr slider, we made two responsive adjustments. First, we hid the column where the date is on mobile. Second, we adjusted the wrap after at the 3 column row. The Wrap after is the setting that devices how many columns can fit into a single line. By default it’s set to 1 to ensure that the each column breaks into separate lines on mobile. This helps creating a layout, that better first for these small screens. However, at this slider, we changed it to 0 on the 3 column row. As a result, the columns stay next to each other.

Related Documentation: Text bar

Related Post: How to Create Beautiful Responsive Image Slider?

The post Flickr Slider appeared first on Smart Slider 3 — WordPress Plugin.

The Carousel with Lightbox slider uses the carousel slider type. Carousel sliders are the best sliders for dynamic sliders, such as product sliders. Of course the carousel type is also a great choice for simple non-dynamic image slider galleries.

Sliders help you save space on your website, but carousels take this to the next level. That’s because they can display more slides next to each other. This encourages visitors to engage with the slider, for example by checking each slide.

In fact, this slider offers three cool ways for navigation. First, there are the arrows, which provide a known way for browsing slide by slide. Second, there are bullets, which have two purposes. Bullets show how many slides are in the slider which the visitors can check. They can also help the visitors reach the slide they want to see quickly. The third way is the touch control. On touch screen devices, visitors can switch slides by swiping. Also, they can use the mouse to drag the slides to the direction they want to move forward.

Layers

The content of the slides is just a simple background image. Therefore, the Carousel with Lightbox slider does not contain any layers.

Animations

Carousel sliders, by default switch all visible slides. But as you can see on this template, too, it’s possible to make the slides switch one by one. This can create a better user experience for the visitors.

The other feature that makes the Carousel with Lightbox template stand out is the lightbox. In Smart Slider 3 you can launch a lightbox from any link field, but here we used another feature. It’s the Backgrounds in lightbox option, which can automatically create a lightbox from the slide background images. It’s also possible to set a Custom lightbox image at the Slide.

Layout

On this slider, the arrows are in outer position, which means they’re not inside the slider area. This makes it impossible for the arrows to cover the slide content. But it also means, that they are only visible, if the slider doesn’t fill the whole page width.

Responsive

The default responsive behavior of carousel sliders is hiding the slide which can no longer fit into the screen size. As a result, Carousel sliders generally display one slide on mobile device.

Related Documentation: Backgrounds in lightbox

Related Post: All You Need To Know About Carousel Slider Type

The post Carousel with Lightbox Slider appeared first on Smart Slider 3 — WordPress Plugin.