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.

Slider Settings

The Interior Showcase template displays more slides next to each other. The showcase slider type which is the base of the slider can display an odd number of slides together. But it always keeps the active slide in the middle. This helps the visitor focus on the primary slide and also see that there are other slides which they can check.

The extra slides displaying next to the middle one can be used for navigation. Clicking on any of these slides makes the clicked slide appear in the middle. Apart from these slides, each individual slide contains navigational arrows to switch forward or backward. Additionally, you can switch slides by dragging or swiping.

There’s also a bullet navigation at the bottom of the slider. Bullets are great way to indicate how many slides there are to see and you can also use them for navigation. The bullets show the slide that has the number 1 on it in the middle. This happens because the starting slide is actually the one in the middle of the slider that was set to be the first slide.

Layers

The Interior Showcase slider uses simple layers to display the content. It has a heading, a text, two image and a button layer. The image layers create the forward and backward navigation using Link actions. While the other layers provide the textual content of the slide.

Animations

Although Smart Slider has many great animations, such as layer animations or parallax effect, we choose to keep this template simple. For this reason, the only special effect it has is the Shape Divider at the bottom of the slider.

Layout

The Interior Showcase slider uses a simple layout, but it still looks special. It’s content it placed at the top and bottom of the slide. How to achieve such look? Well, you need a row where the Stretch option is enabled. The Stretch makes the row fill up the whole slide vertically, so it can push the content above it to the top of the slide. Then inside the row’s column the content is Vertically aligned to the bottom.

Responsive

Smart Slider is a responsive slider that offers many great features to make your slides look perfect on small screens. For example, you can adjust font sizes to make the texts easier to read on small screens. Additionally, you can hide layers that are less important to save space on your slider. At the Interior Showcase template we hid the button and the text layer on mobile.

Related Documentation: Link actions

Related Post: 10 Beautiful Full Width Slider Examples

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

The Nala Showcase template is based on the Showcase slider type. Showcase sliders are special kind of sliders, because they can display more slides next to each other. There’s one slide in the middle, and if there’s enough space, other slides can show up on its left and right side. Additionally, you can highlight the middle slide by making the before and after slides smaller, or semi-transparent.

Layers

There are several layers in the Nala Showcase slider. You can find the commonly used layers: heading, text, image and button on most slides. These layers help you create content for your slides. If you’re looking for something more interesting than these common layers don’t worry. There are more special layers on this slider, such as the Counter. The Counter is a numeric layer that counts up or down to the given number.

Animations

Although the Showcase sliders don’t have fancy animations, you still have many options to add awesome effects. Many slides contain layer animations to introduce their content. Layer animations are great to make your slider look more interesting and to add some movement.

Layout

Each slide has a different layout, which makes the slider a lot more interesting. There are also cool solution to create custom “layers”, such as a button by using a row. The row itself has the background color both on normal and hover state. Additionally, it opens a lightbox when clicked. The left column contains the image layer and the right one has the text.

Responsive

Smart Slider helps you create gorgeous sliders that look equally great on small screens. For example, you can optimize your texts by adjusting their font size to better fit small screens. You can use the Font Resizer for this.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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

Settings

A cover flow slider is a special kind of slider, that shows more slides next to each other. In Smart Slider 3 you can create a cover flow slider using the Showcase slider type. The Showcase slider type, like the cover flow sliders, displays a single slide in the middle, and am equal number of slides on its sides. Clicking on the slides on the sides will make the slider switch to the clicked slide.

The slides which aren’t in the middle have lower opacity. This makes them look they’re slightly faded out. Setting up such effect is very simple, and it can be done in just two steps. First, set a slider background color. Then, lower the opacity of the Before and After slides.

Layers

This slider focuses on the pictures, and the way the slider displays them. For this reason, there’s just a few layers on each slide. The most obvious layer is the text layer, which displays the white colored text. It accepts HTML codes for formatting the content inside. So, we made the “Day X” text on each slide bold using the HTML b tag.

Animations

The most spectacular animation on the Cover Flow slider is the actual cover flow effect. Although by default the Showcase slider type doesn’t look like a cover flow slider, it’s easy to set it up like that. This slider type has many cool animation settings, what you can play with to create an amazing effect.

There’s also a basic incoming animation on the heading layer. The effect fades and moves in the layer from the right. The movement is subtle, but elegant.

Layout

Each slide has a row, which contains the text layer for the content. This row serves design purposes: it has a transparent to dark gradient background. As a result, it helps increasing the legibility of the text.

Responsive

The Cover Flow slider has two mobile specific changes. First, the text size was reduced to make it fit better to the slide. Second, we adjusted the paddings of the row and the Content layer. The paddings on the sides of the row are smaller on mobile, which allows the text to take up more horizontal space. Also, we set top padding on the Content layer. This makes the slider appear taller on mobile. As a result, the slides look more roomy.

Related Documentation: How to create an overlay for the slides?

Related Post: What Do You Need to Know About Slider Types?

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

The Christmas Postcards template uses a Showcase slider type, which you may have seen on other websites. With this type, you have the convenience of displaying multiple sliders at once.

The one in the middle takes the spotlight, and the ones on the sides kinda hover around it, making it easier to switch between them. The middle one stands out even more because the ones before and after are a bit transparent, thanks to the settings in the Animations tab.

Have you noticed the slides on each side tilt in different directions? This can also be adjusted in the Animations settings with the Rotate section.

This slider has a full-width layout, taking up the entire width of the browser window. No distractions, just the slider.

Navigating through it is a breeze. On smaller screens, you just need to swipe horizontally. On the other hand, on larger screens, you can use the bullet points to pick the slide you want. It can be super handy to see how many slides are actually available.

There’s also a ‘Next Letter’ button on each slide. Click on it, and that’s it! You’re onto the next slide.

Layers

Guess what’s great about Smart Slider 3? It’s got these amazing layers that take your slides to a whole new level. Add Headings, throw in some text, create buttons, and don’t forget the images.

However, the real deal is definitely the Absolute layers in this slider. Drag and drop them wherever you want, just like we did with those Image layers on the right side.

They are strategically placed, each image layer adding to the festive landscape. And here’s the secret ingredient: Z index. It ensures that these layers overlap in the best ways, creating layouts that are just downright mesmerizing.

There’s more magic with the layer parallax setting. It’s a simple trick but so effective. Check it out on this template, hover over the images on the right side, and see the layer parallax in action. It’s like the images come alive, adding an extra flair to the Christmas vibe.

Animations

There are several features in this slider that make its layers more interactive. One of these is the above-mentioned layer parallax effect.

Another specialty of this slider is the Particle effect you can spot in the background. These are small moving particles behind the slides, that interact with each other and the mouse as they are moving. The snowing effect on this template is the result of custom particles we’ve created. You can also customize the particle effect in the particle manager, by changing its effect, the number of particles, and its behavior when you hover or click on it.

In addition, you can spot incoming animations on most layers, which can be very useful to make their entrance more eye-catching. One of the more outstanding ones is the Reveal animation. It’s a perfect way to slowly reveal your message while engaging the visitors.

Layout

All of the Christmas Postcards slides create a captivating layout using Rows and Columns for their structure. They have their image and absolute layers on the right side while the main content stays on the left one.

This layout offers you the perfect opportunity to place your images below the text on smaller screens, like mobile view, without any hard work.

However, if you’d like them to appear in a different order, you can easily adjust them to show the images first in the column’s settings.

Responsive

In Smart Slider, you really don’t have to do much to make your sliders look amazing on smaller screen sizes.

Many settings activate automatically to make your work easier, but if you’d like to make some additional changes, then there are some great responsive functions that you can set manually.

For example, you can increase or rather, decrease the font size to fit smaller screens with the Font Resizer. In addition, you can also simply hide layers that you deem as non-necessary on mobile view.

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

The Monolith Boxed Slider makes use of the Showcase slider type. One of its unique features is that it can represent more than one slide next to each other.

However, the selected slider is completely in focus drawing the visitors’ eye. The ones on each side have a lower opacity to enhance this effect even more. It results in a design that makes them look slightly faded out. Setting it up is very simple and you can easily achieve this in just two easy steps. First, set a slider background color. Then, lower the opacity of the Before and After slides.

On top of that, the layout of the slider is full-width, which means it fills the browser horizontally. As a result, it’s easier for more slides to display, especially on today’s large monitors.

You can browse them using one of the three options it offers. For smaller screen sizes the most beneficial is to drag each slide horizontally, as swiping is mostly used on them.

Besides this, there are three easily noticeable dots under the slider. Your visitors can use these bullet points to choose the slide they would like to view. Moreover, bullet points are very helpful in case you want to show the number of slides available in the slider.

And last but not least, the third option is to click on one of the slides slightly shown on each side of the main one. This is very optional if you would like to navigate between the slides one by one.

Layers

You can see mostly the same layers on all of the slides. Some simple layers are the Text layer, Heading layer, Button layer, and Image layer. Almost all of them can be found on each slide. What’s outstanding about them is how they are implemented to create a sophisticated look.

In addition, without any doubt, the most unique layer is the Image Area layer. This layer is perfect for adding a design element to your overall look.

You can easily check and change your layers in the layers list. It’s accessible from the top, just select the icon. Here you can check all layers of the slide, change their name, copy, delete, hide them, or change their order.

Animations

The most eye-catching animation on the Monolith Boxed Slider template is the Horizontal showcase effect. This slider type comes with many unique animation effects that you can try out and play around with to create your own individual design.

There are also basic incoming animations on all of the layers separately. They come in from different directions of the slide, smoothly introducing them. These movements together create a subtle but elegant look.

To configure the layers’ delay and duration use the visual timeline at the bottom of your slide editor.

Layout

All of the slides are built using the 1 row 2 columns structure, except for the Testimonial slider. This block is separated into three equal columns taking up the full width of their container.

However, the most intriguing solution may still be the Portfolio slide’s layout. It creates a captivating gallery with its special arrangement. There are three columns, which contain three images in each of them.

Besides, all of its columns have the same space between them. This can be achieved by setting up the Gutter on their row container.

On the other hand, the images are simply separated by the top margin added to them.

Responsive

Smart Slider is very versatile in its responsive settings. Many of the layers take advantage of the Hide On option, which makes it easier to hide layers on smaller screens.

Not to mention the Font Resizer, which is one of the most useful gadgets, as it lets you uniquely optimize your layers device specifically.

Their main purpose is to offer your visitors a pleasant experience while browsing your site whether they are viewing from a smaller or larger screen.

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

The Showcase Portfolio template is a modern looking slider you can use to display your portfolio items. It’s a full width slider which is the most popular way to display a slideshow on a website. The slider type is showcase, which displays an “active” slide in the middle of the slider, and displays additional slides on its left and right sides. So, the Showcase slider type can only display an odd number of slides. In fact, it always displays at least one slide. But if there’s enough horizontal space, it can display additional slides as well.

The Showcase slider type uses the extra, non-active slides for slide switching. As a result, buttons or other elements won’t be clickable unless they’re on the active slide. This provides a nice navigational experience which visitors can quickly understand. If you want to disable this behavior, head over to the Animation settings and turn off Switch with next/previous slides.

Layers

There aren’t many layers on the slides of this slider. Only two headings and a CTA button are at your disposal. But for a slider that displays your portfolio items you don’t need too many layers. In fact, the less layers you use, the more curious the visitors will be and they’ll more likely to go and check the details of your portfolio.

Animations

There are no layer animations on the Showcase Portfolio slider. But there’s a special effect you can see if you switch slides. All slides but the active one have a dark overlay. This effect is created by setting a background color for the slider. Then at the Animation settings the Before and After opacity values were lowered. This way the non-active slides are semi transparent, and the slider background color gets visible below them.

Layout

The base of the slide is the background image. The Focus point was slightly changed to ensure that the content doesn’t overlap the focus of the image, even on the smallest screens. The content is aligned to the bottom of the slide, which leaves enough space for the background image.

Responsive

The default responsive behavior of Showcase slider is that as it downscales, it starts hiding the extra sliders that fit next to the active slide. When the screen gets smaller than the set slide width, the active slide starts downscaling. As a result, on mobile you’ll only see one slide.

Just like at every slider type, you can use the responsive tools Smart Slider has to fine tune the mobile and tablet result. For example, you can use the font resizer to make the texts fit better into the slide.

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: 12 Stunning One Page Examples Which You Should Check

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

Tired of common product sliders? Do you want to show more than just one product for the visitor, but not to distract them with many? The Product Showcase slider is what you need! The showcase slider type displays one slide, the active slide in the middle. Then on the left and right side (if there’s enough space) they can see parts of the next and previous slide. This helps the visitor with two things: focusing on one product and learning that there are more products to see.

Layers

Each slide has the product image as a slide background. This allows the image to be seen in a large size. At the bottom of the slides the visitor can learn more about the product. The first and most obvious information they see is the price of the product, which is green. Below the price, they can learn the name of the product written with a large, white font. The last content on the left side is the product description. On the right side, there’s a CTA button the visitors can use to buy the product. It has the same green color as the price and it’s pill shaped.

Animations

When you switch a slide, you can see the slider moves horizontally. This animation is the main animation of the slider which you can set in the Animations tab of the slider settings. Also, you can see the next and previous slides are much darker than the active slide. This is because their opacity is 20%, so you can focus on the active slide, but you can still see the other slides.

Layout

Visitors can navigate on this slider in three ways. The first and most obvious way is the arrow on the left and right sides of the slider. It’s a special shaped, white arrow, which is easy to notice on the dark background. Apart from the arrows, the visitors can switch slides by dragging or swiping. This swiping is favored on touch screen devices, like mobiles or tablets. On mobile the swipe is much more natural, than tapping a small arrow. The third way to switch slides is clicking or tapping on the next or previous slide. This action makes the slider switch to the selected slide.

Responsive

When you check this showcase on smaller views, you can see the slider will be smaller, and you can see only one slide on mobile. Because of that the visitors can focus on the content, and all of the layers are legible.

Related Post: Do you Need a Product Slider for your Webshop? Yes, you do!

Related Documentation: Responsive behavior of the showcase slider

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

With the portfolio categories slider, you can showcase your portfolio in a modern way. Just import this Smart Slider 3 Pro template, change the images, write a short description for your portfolios and use the slideshow on your portfolio page.

This slider was built with the showcase slider type which is a special type of slider. With a showcase slider you can show more slides at the same time as at the carousels, however, in this case you can showcase not just the whole slide even a part of a slide, too. In these kinds of sliders the active slide is in the middle which the visitor will see first and focus on. Clicking on the previous or next slides, you can switch slides, and see the others.

Layers

You can see the same layers on every slide: a heading layer which can be the title of your portfolio, a text layer, which can be a short description, and a CTA button, where you can navigate to your work or open it in a lightbox.

The speciality of the slider is that every slide has different background colors, and every background image is smaller than the size of the slide. What is even more awesome is that if you hover over the button, you can see the same color as the background color is.

Animations

When you switch to the next or previous slides, you can see that the white box comes in. The row has an incoming layer animation, which attracts the eye and calls the visitors attention and makes your page more powerful. This animation is on the row, it rotates the box a bit, and fades in.

Layout

At the background images we have used the center fill mode which puts the background image in the center with its original size by default. If you resize the window it won’t change its size based on the screen’s width so it will be cropped on small screens and it will show the image on its focus point. You can change that focus point if you need to. In this template the Y focus point is 50% so the slider is vertically in the middle and the X focus point is 85%, which means that the slider is aligned in the right side. In this template we have worked with 800×540px images, so you can reach the best result, if you work with the same image ratio.

Responsive

The slider is fully responsive and looks good on mobile and tablet as well. In mobile we have used paddings, and with that you can see a part of the background image, also you can see the white box and the content on it.

Related Post: 10 Beautiful Full Width Slider Examples

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

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

The Renovation Showcase slider is a special looking slider, what we call Showcase type. The Showcase type slider displays more slides next to each other. It always shows an odd number of slides, keeping one slide in the middle. This slide is the so called “active” slide, which the viewer can focus on.

The layout of the slider is full width, which means it fills the browser horizontally. As a result, it’s easier for more slides to display, especially on today’s large monitors. The slides next to the active slide are faded out. To achieve such effect, first make sure you set a slider background color. Then head over to the Animations tab and change the Opacity of the before and after slides.

Layers

The most interesting layer on the Renovation slide is, without question, the Before After layer. This layer lets you compare two images in the same place. It’s perfect for showing the starting and ending stages of a renovation.

Another notable layers on this template include heading and simple image layers. These image layers display the colored logos.

Animations

There are no layer animations on this template. As a result all layers are immediately present when the slide gets visible. While the Showcase type has many special animations, we chose not to use them. So you can see a simple horizontal movement when you switch slides.

Layout

The layout of the Renovation slider is plain simple. There’s a before after layer at the top, and a three column row below. To ensure the last two columns stay this close to each other, we set a Max width at both of them.

Responsive

The basic responsive behavior of the Showcase slider type is that it always fully displays the active slide, which is in the middle. If there’s room to display more slides and equal amount of new slides are revealed next to the active slide.

On mobile the layout didn’t need much adjustment, as the font sizes were good. Also, the row automatically breaks its columns into new lines on small screens. But if you’d have to make changes, you can always use the Text Scale option to reduce the font size. Also, you can change the Wrap after on the row if you don’t want it to break the columns to new lines.

Related Post: Introducing Before After Layer

Related Post: What Do You Need to Know About Slider Types?

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