Carousel Sliders — Smart Slider 3 — WordPress Plugin

Product Carousel

Roland Soos — Tue, 06 Oct 2015 13:27:32 +0000

💡 Best features in this slider

Settings

Unlike normal sliders, WordPress carousels show multiple slides at the same time. This is a really good way to showcase the latest or hot products, blog posts, images or videos. You can set the whole slider and the slides widths and select the number of items to move. Creating and managing a responsive carousel has never been easier.

At carousel sliders you can set the slider size and the size of the slides separately. The slides which display next to each other are in one pane. You can set a maximum width for the pane which you can limit the maximum amount of slides that can be displayed next to each other. In this slider 3 slides appear in one pane.

Layers

The most attractive layer is the Transition layer in this slider. If you hover over the image, you can check another image with a fading effect. With this you can display 2 images in the same place.

In some slides you can notice a new or sale badge in the top right corner. These layers are in absolute position, and always are in that corner. You can anytime replace the text, or delete it.

Animations

The carousel uses a horizontal main animation, if you click on the arrows, bullets or drag with your mouse, the whole pane will move horizontally. If you want to switch only one slide, not the whole pane, then you can enable the single switch option at the Slider settings → Animations tab.

Layout

If you open the layer list, you are able to check all of the layers on your slide. As you can see on the image below, there is a transition layer on the top of the slide, and a row below that image. This row stands out from 2 columns where heading layers are.

Responsive

If you check the carousel on smaller screens, you will notice that the carousel slider works that way, that it can only show as many slides as many can fit into the available space. So on mobile devices you can see only one slide, and should drag if you want to see the others. The arrows are hidden on mobile, because with that you can save space on the edges, but the bullets helps the visitor to see there are more slides in the slider.

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

Digital Art

Ramona Nemeth-Csoka — Wed, 29 Jun 2022 19:54:18 +0000

Slider Settings

The Digital Art template is based on the Carousel slider type. The carousel is one of the slider types of Smart Slider which can display more slide at a time. It’s also a full width slider, which is very popular because it looks great.

Another interesting feature displayed on this template is the slider background image. Slider backgrounds sit behind all slides of the slider without moving away. So its perfect to give a nice touch to any slider you create.

Slider background image, located at the bottom of the slider settings page

There are bunch of navigation options available on this slider. The most obvious are the arrows sitting on the left and right side of the slider. They’re super great for slide to slide navigation and make it simple to navigate the slide. Another navigation option are the bullets, which also indicate how many slides there are to see. Swiping on touch screens and dragging with the mouse is also available to switch slides.

Layers

The Digital Art template uses the most basic layers: image, heading, text and button. But as you can see even with such simple layers it’s perfectly possible to create a stunning slider.

Animations

The most interesting aspect of the Digital Art template is its animation. The template has both layer animations and events. In Smart Slider you can use events to trigger layer animations on various actions. Like at this template’s case hovering on the slide makes the two rows appear. Not hovering on the rows anymore makes them hidden again.

Events on the row

As touch screen devices don’t have hover actions, hover based events turn into touch based events on these devices. So, for example, a mobile user can touch the slide to reveal the layers and touch somewhere else to hide them.

Layout

The base layout of each slide is two rows. One row is at the bottom with it’s Stretch option enabled, which pushes the other row to the top. At the bottom row’s column the content is vertically aligned to the bottom. This makes the layers appear at the top and bottom of the slide.

Vertical align on the column

Responsive

The basic responsive behavior of the Carousel sliders is that as they display as many slides as can fit into the current slider width. Then, as the screen gets smaller, the slide that can no longer fit disappears and the remaining space is divided between the remaining slides. As a result, the Carousel slider’s slides have approximately the same size on desktop, tablet and mobile devices.

Because of this, it’s generally very easy to make Carousels look good on mobile. Additionally, they usually need little to no responsive adjustments. But if you feel you need to make changes, you can always adjust the font size or even hide some layers you don’t want to show on mobile.

Related Documentation: Layer animation

Related Post: 9 Inspiring WordPress Carousel Examples

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

WordPress Post Slider Carousel

Ramona Nemeth-Csoka — Wed, 06 Dec 2017 13:33:15 +0000

Settings

Smart Slider 3 has a special slider type, the Carousel which is perfect to create an amazing slider. WordPress carousel can show more slides next to one another which means you can recommend for example more blog posts at once. The carousel displays the slides in a trendy card-like design, which guarantees the good responsive behavior. This gives another reason to use it for creating a Post Slider but you can use this type as a Product Slider as well.

This template is a full width slider so your slider will be 100% width of your page. This carousel has 1200px maximum pane width, whose value defines the maximum width of how far your slides can go within the slider. The slides have 360px width with 20px minimum slide distance, so you will see 3 slides next to one another.

Slider and slide sizes

Layers

Each slide has the same layers on it: a row with 3 text layers. At the first text layer the name is a link, and the link has a different color, so you can highlight the author, also you can link. At the second text layer the “Yoga” text is bold. Text layers can accept HTML codes, which you can reach this kind of layout. But you can also use the highlighted heading layer, where you can add a different style to the highlighted text.

Layer list

Animations

When you click on the arrows or bullets on the bottom, or drag with your mouse, you can switch the entire pane. 3 slides will move together with a horizontal animation. This animation is the main animation of the slider. If you want to switch the slides one by one, then you can enable the single switch option, and then one slide will move at the slide switching.

Layout

At the carousels the slides are next to each other. At this example 3 slides are in one pane, the arrows are on the left and right sides and there is a number type bullet control on the bottom which gives a frame to the slider.

Responsive

The carousel is fully responsive, so on smaller devices you will see 2 or 1 slide, which can fit the available space. Besides, the slider is touch friendly, your mobile visitors won’t have troubles with it. To make the navigation easy and convenient, the slider has both arrows and bullets. Bullets are great to allow a quick navigation and show how many slides there are to see.

Related Post: Enrich your Blog with a Post Slider

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

Logo Carousel

Daniel David — Tue, 11 Dec 2018 12:10:07 +0000

Settings

With a logo carousel you can show your sponsors, partners or clients. This carousel type slider is a good design element or a cool separator between your sections.

This WordPress carousel is very simple and you can create it easily. On the sample slider you can see a slider background image, which is behind the slides. You can change this image to your own at the Slider settings → General → at Slider design.

Slider background image

The carousel is autoplaying in every 8000ms. You can customize the autoplay at the Autoplay tab of the Slider settings, for example you can stop the autoplay if you hover over the slider, or if you click on a slide.

Layers

There aren’t too many layers in a slide. There is a row with a column where only one layer is used, a simple image layer. This image is vertically and horizontally in the middle of the slide. Every column has a 2px white border with a small border radius, and if you hover over the columns, the background color changes to a light color.

Hover color of the column

Animations

When you click on the arrows or drag with your mouse, you can switch all visible slides together. The main animation is horizontal, so the slider moves horizontally.

Horizontal main animation

Layout

Every slide on the carousel has the same 1 row – 1 col structure. On the left and right side of the slider you can see the arrows control, and the bullet control is on the bottom. These controls gives a frame for the slider, and you can switch slides with them.

Responsive

The slider is fully responsive, and works well in every device. If you check your slider on mobile, you can see that the arrows are hidden, but the bullets are visible. You can switch slides with drag, and the bullets shows you there are more other slides in the slider.

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

Full Width Product Carousel

Daniel David — Mon, 21 Jun 2021 13:58:07 +0000

Slider Settings

The Full Width Product Carousel template is a full width slider which uses the Carousel slider type. Carousel sliders can display more slides next to each other which makes them perfect for creating product sliders. Each slide can display information about one product, so it’s easy to compare their details. Additionally, the full width layout allows many slides to fit next to each other on today’s large monitors, saving both space and clicks.

Visitors have three ways to browse the available slides. First, they can use the arrows on the sides of the slider. The arrows provide a convenient and easy to understand way to go through the slides one by one. Second, visitors can use the bullet points on the bottom of the slide to view whichever they like. Additionally, bullets are great way to show how many slides there are to see. The third navigation way is the drag navigation, which excels on touch screen devices. In this case visitors can switch slides by swiping.

Layers

The base of each product slide is an image layer, which contains the picture of the product. Each image has the same size, which gives a consistent look to the slider.

The size of the image displays in the Layer Window

Apart from the image layer, there are heading layers on the product slides. These layers display the category, name and price of the product. There’s a CTA button on every slide, which prompts the visitor to buy the product.

Animations

The only animation on the Full Width Product Carousel template is the Main Animation that’s responsible for moving the slides during slide switching. It’s a horizontal kind of animation, which means it moves the slides on the x axis.

When you use the Horizontal animation, you can choose to switch slides one by one, as opposed to switching all visible slides together. Using the Single Switch option you can ensure that there won’t be lose slides, and the visitors will always see the same amount of slides. That is, if you have enough slides to create a full carousel.

Using the Single Switch option also introduces the possibility of using the Justify slides option, which decides how the slides are positioned inside the slider pane. There are three options to choose here: space between, space around and center. The Space between pushes the first slide to the left side of the pane, and the right slide to the right. The Space around creates an even amount of space on each side of the slides. The Center puts the slides in the middle, and their distance will be the set Minimum slide distance.

Justify slides: Space between (left), Space around (middle) and Center (right)

Layout

If you’re looking to create a product slider, you’re likely already have a webshop where your products are. The Pro version of Smart Slider allows you to dynamically create slides from your WooCommerce products. What does this mean? Simply, you won’t need to add the product details to the slides manually, and maintain them in two places. Instead, the slider will automatically pull the data for you. What’s more, you can create a dynamic product slide based on any of our template sliders.

What makes the slider interesting is that the layout of certain slides varies. Smart Slider allows you to give each slide a different layout within the same slider. So you can bring your creative ideas to your carousel with ease. For example, at this slider the second slide contains a newsletter subscription card. The fourth slide is a testimonial slide, which can help convincing your visitors to buy from your store. The 8th slide contains a discount offer, which is another great way to make your full width product carousel more interesting.

Responsive

The Carousel slider type’s responsive behavior is rather simple. It displays as many slides as can fit into the current slider size. The slides are not resized until the last slide can’t fit anymore. For example, if your slides have 400px width, then they’ll always have this 400px width until the screen gets smaller than 400px.

Spacing on mobile made by the Side Spacing

If you check the Full Width Product Carousel on mobile, you’ll notice that it has equal spacing on each sides. That happens because of the Side Spacing option, where you can set the space between the slide and slider on each device.

The post Full Width Product Carousel appeared first on Smart Slider 3 — WordPress Plugin.

CrossFit

Ramona Nemeth-Csoka — Mon, 16 Jan 2023 07:00:26 +0000

Slider Settings

The Crossfit template is a full width slider. People love full width sliders, because they fill the available horizontal space. As a result, they can create gorgeous sections on their site.

The slider type is Carousel, which means more slides can appear next to each other. Carousels are great for creating a product or a post slider. But they’re also great for creating a slider about your team. There’s a slider background image set for the slider. This image creates the dark background behind the slides.

Slider Background image at the Crossfit template

Although displaying three slides at a time suggests there are be more slides to see, there are controls to help the navigation. For example, there are nice green arrows on each side of the slider. They’re prompting you to view the next or previous slide. Additionally, there are bullets at the bottom of the slider. Bullets are useful elements to add to your slider, because they can help in many ways. First, they tell the visitor how many slides there are to see. Second, the bullets allow easy navigation to any slide.

Layers

The Crossfit template uses the most basic layers. First, there’s a heading layer that displays the person’s name. Second, there’s a text layer to display their occupation. Then the actual image of the person is an image layer.

There’s also a decorational image next to the heading and text layers, inside a two column row. Rows are the building blocks of Smart Slider and they help you place layers next to each other.

Animations

The Crossfit template uses layer animations and events to display the details of each person. How does this work? If you hover over the slide, the layers at the bottom show up. Of course, mobiles and touch screen devices don’t have hover state. So the layers show up when the visitor taps on the slide.

Layout

The layout of the slides is very simple but it looks amazing. There’s an image with a nice shape as the background of the slide. Then there’s the person’s image, which is an Absolute positioned image layer. Absolute positioning is great for decorative content to your slider. That’s because it allows placing the layers anywhere within the slide. This can happen because Absolute layers don’t actually take up space, they float above the slide.

Layout with Absolute positioned image in the back and Default positioned row in the front

The textual contents are in Default position. They also have a Max Width set to ensure that they always stay next to the image.

Responsive

Smart Slider is a responsive slider and offers a bunch of tools to fine tune your slider. However, at the Crossfit template we didn’t need to use most of the available tools. In fact, we only needed to reduce the font size on mobile using the Font Resizer.

Related Documentation: Layer animation

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

Testimonial Carousel

Daniel David — Fri, 17 Feb 2017 09:18:48 +0000

Settings

Minimalism and simplicity are the two expressions that surround the Testimonial Carousel slider. Displaying testimonials doesn’t always need fancy stuff. It’s not the effect that will convince your hesitant visitors to be your customers. The slider above isn’t fancy, it uses its minimalist design to convert. It has all testimonial slider requirements: the customer’s words, name, image and occupation. You can see all information the slider displays in a simple but clear way.

The slider has three different navigation options. The two most obvious are the arrows and bullets. The arrows are placed at the left and right side of the slider. They take a minimalistic approach, and their white color is easy to see on the blue background. You can find the bullets at the bottom of the slider. Just like the arrows, they have white color, although with a slight opacity. The active bullet is marked with an empty circle, which means it has only border but not background. The third way to switch slides is to click on them. Each slide has a custom link action to switch to the next or previous slide. This custom navigation makes the WordPress Carousel look and feel special. You can use the layout in your dynamic slide generator to create dynamic testimonials.

Layers

We’ve used the default positioning to build each slide, which makes sure their responsive behavior is great. There’s a company logo at the top, which isn’t required to create a good a testimonial slider, but it’s a nice addition. Below the logo you can find the customer’s testimony. It’s the most important part of the slider, so the text is written using an easy to read font, Roboto. The 18px font size and dark-grey color also helps the legibility. Below the text we placed the customer’s image. This helps making the testimony believable and building trust. The name and occupation of the customer is placed on the bottom.

Animations

This carousel slider has a horizontal main animation, so when you switch slide, it will move horizontally. The single switch option is enabled, so you can switch only one slide.

Layout

In carousel sliders each slide is next to each other, and you can display more slides at the same time. The layout of the slides is the same: there are layers under each other.

Responsive

By default controls like arrows or bullets are hidden on mobile, but at this slider they are visible. At carousels you can display only whole slides, so you can’t display a part of other slides. If you check it on mobile, you can notice that one slide is visible, but thanks for the controls, your visitor can notice there are more slides.

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

Instagram Carousel

Ramona Nemeth-Csoka — Wed, 02 Mar 2022 10:43:36 +0000

Slider Settings

The Instagram Carousel is a full width slider, so it fills the browser width horizontally. It uses the Carousel slider type, which can display more slides next to each other. Based on its settings, the Instagram Carousel slider can display up to 4 slides together.

Switching between the slides of the carousel is super easy. There are arrows on each sides of the slider, and there are bullets at its bottom. Apart from that, swiping is supported on touch screens.

One of the most interesting aspects of the Instagram Carousel is the background image. It’s the background of the slider itself, so it covers the whole slider area.

Slider Background image option

Additionally, the slides have rounded corners. This looks super nice and gives a card-like layout to the carousel. You can change the border radius option, which is responsible for the rounded corners at the Slides tab.

Border Radius option for the slides

Layers

The layout of the Instagram Carousel is pretty simple. On each slide there’s an image layer and two rows. One row has two columns to display the Instagram username and another column to display the post date. However, the other row has one column only, and it displays the text layer at the bottom.

Animations

There are no special animations on this slider. The only effect you can see is the Horizontal Main animation of the Carousel, that moves the slides.

Layout

The Instagram Carousel has an interesting layout solution. The username and date of the post are displayed on top of the image. How did we do that? Simply set a negative top margin to the row that contains these text layers.

Negative top margin

Responsive

Smart Slider is a responsive slider and has many cool options to optimize your sliders for small screens. However, at this carousel we didn’t really needed to make changes for small screens. This is because of the Carousel type’s default behavior. As the screen gets smaller, it starts to display less slides, and won’t resize them until there’s only one slide. So, each slide has almost the same size on tablet and mobile.

Related Documentation: How to use a demo slider in your generator

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

Carousel Divider

Ramona Nemeth-Csoka — Tue, 26 Sep 2017 12:48:34 +0000

Settings

The shape dividers are between the slide background and its layers in a Simple or Block slider. The Carousel and Showcase types work in another way: the whole slides are above the shapes. This makes it important to make the sliders high enough to avoid the slides covering the shapes. This slider also uses animated wave-like shapes. The result is simply marvelous.

The slider has a slider background image which you can set in the Slider settings → General → Slider Design. This image will be below your slides like in the example.

With a WordPress Carousel you can display more slides next to each other at the same time, which can save place on your website. Carousel can be useful in product sliders or logo sliders, but you can use it to show your latest post as well.

Layers

Every slide has an area layer, a caption layer, heading layer, button, and at the bottom of the slides there is an image box.

You can use the area layer to create a line as you can see in this template. With area layer you can create a layer which is filled with a simple or gradient color. It can be used to create lines which can be a good separator between your layers, like in this example. All you need is to set the area height to 2px and change the color.

Animations

This carousel type slider has an animated shape divider in the background which is continuously moving with a wave effect. You can change the speed of the animation at the Slider settings → Animations → at shape divider. Now the speed is the default: 100%, but if you want to a slower movement, you can simply change it.

Layout

Each slide has the same layout: there is a row which contains another row. The layers are under each other, a caption layer on the top, then comes a button, a heading and an area layer. Finally, there is an image box on the bottom of the slides.

Responsive

When you check the slider on mobile, you can see only one slide. This is because the carousel type slider can only show whole slides at the same time, and in mobile one slide is visible. To pay the visitors attention there are more slides, we have enabled the bullet control on the bottom of the slider which shows how many slides are in the slider.

Related Post: Enrich your Blog with a Post Slider

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

Infinite Logo Carousel

Daniel David — Tue, 05 Feb 2019 12:23:04 +0000

Settings

The base of the Infinite Logo Carousel is a carousel type slider. The Carousel slider type is a special type in Smart Slider 3, that can display more slides next to each other. In this case, you can see 4 slides beside each other. The amount of slides the slider can display depends on two factors: the current slider size and the set slide size. If you don’t want to display too many slides next to each other, you can use the Max pane width option.

The slider uses boxed layout, which means it will always have the same size as its container. For example, if you place the slider into a 800px wide container the slider will have this size as well. Additionally, it will only display two slides. The slider has a white background color. You can change that at General tab → under Slider Design.

Slider Background Color option

Layers

Every slide contains a one column row, that contains the image layer with the logo. Each image layer has 100x102px size, which makes them fit perfectly into the slides. To help you prepare the perfectly sized image, you can find how big image is used at each image layer or background. Just check the top right corner of the image field.

Image size in the Layer Window

Animations

The most obvious animation on the Infinite Logo Carousel slider is the Autoplay. This option makes the slides change automatically, without any user action. The autoplay is a great way to get your visitors to engage with your slider. But be careful! An autoplaying slider that switches too fast will have a negative impact. People don’t like being interrupted when they read or watch a video. So make sure you set the autoplay duration carefully.

Layout

As mentioned above, each slide contains a row and a column inside. This column is the place where we set the gray background color. This color is a great way to create contrast with the white background of the slider. Additionally, it helps to make the slides stand out.

Background color at the Column layer

Responsive

The Carouse slider type’s basic responsive behavior is hiding the last slide if it can’t fit anymore. As a result, the smaller the screen where you check the slider, the less slides are visible. For example, on most mobile devices this slider will display one slide at a time. Because of this, the slides in a carousel slider always look great on mobile.

The post Infinite Logo Carousel appeared first on Smart Slider 3 — WordPress Plugin.