1. Set optimal sizes

It is important to set an optimal slider size which you will work with. These sizes will define the ratio of your slider, it is also important in slide editing as well. Don’t work with too big sizes. If you want to create a bigger slider, then set the responsive modes correctly. The responsive modes define how your slider should behave on different screens.

In Smart Slider 3 there are more responsive modes available:

• Auto responsive mode: if you use the auto responsive mode, then your slider will be as big as the container it’s in.
• Full width mode: A full width slider fills the total width of the browser even if the container is smaller. It looks good on your home page as a header, but you can insert a slider into your blog post as well.
• Full page mode: A full page slider will have 100% width and the height of your screen on every device. This mode is available only in the Pro version of Smart Slider 3.

It’s important to mention that when content mode is used, your slide’s height is based on the layers and all the slides’ height are based on your highest slide even if you set a maximum height.

2. Use the correct slider type

The slider type determines the look of your slider. In Smart Slider 3 there are more slider types available: Simple, Block, Showcase and Carousel.

The Simple type shows one slide at a time and people use them in a boxed style, for example in a post, or use them as a full width slider in the header. The block type is special because it can show only one slide. The Showcase and the Carousel slider can show more slides at the same time.

3. Always give control to your visitors

If you have a slider, you should care that the visitors like it if they have control over the slider. It can be disturbing if there is an autoplaying slider, but the user can’t stop it to read the content or can’t switch to the next slide.

The slider controls can be useful in navigating between slides, and it can also share information. For example, bullets can show how many slides you have in the slider, and thumbnails show a little preview of the slides.

4. Optimize your slider

The system of Smart Slider 3 works the way that the slider loads last on the website because of the positioning. The plugin waits until your website is completely built up to know how big your slider can be and where the layers should be.

However, it can happen that if you work with too big images, your slider can load slowly. In Smart Slider 3 you have settings to optimize your slider. You can resize the layers or make the quality of your images lower, and can also use the lazy loading setting.

5. Set the background fill mode

Choosing the right fill mode is also important at the slider creating. By default the “fill” option is used which will make the image as big as it needs to be to cover the whole slider. This means that if the slider and image ratios differ, the image will be cropped, and the focus points will decide which part of the image should stay on screen, so by default the center. If you want your whole image will be on your slide without being cropped, the “fit” filling mode is what you need.

Of course, you can set the background image filling modes separately at the slide settings, so you can fully customize your slider.

6. Give a nice visual effect to your slider

Using animations and effects can be a good choice if you want to make a powerful slider which attracts the eye. In Smart Slider 3 you can choose from more types of effects which you can set at the slider settings.

• Parallax effect: The parallax makes the illusion of depth when your page moves. It works the way that it moves the images at a different speed and show them from a different angle.
• Shape divider: The shape divider is a modern design element which you can use as a separator between sections. You can animate it, change its color, and place it on the top or bottom of the slider.



• Particle effect: The particle effect is a variety of small objects. They move around the slider and interact with each other or with the visitor.
• Ken burns effect: This effect is one of the most popular effects for background images which can smoothly zoom.
• Background animation: You can also choose a background animation to animate your background images.
• Main animation: The main animation is the basic animation to switch your slides with. You can set horizontal or vertical or fade controls.

7. Create lightbox from slide backgrounds

The lightbox is a popular feature in Smart Slider 3 Pro. Did you know that you can create lightbox images from your slide background images? To do so you’ll need to have background images on all slides, and then you can turn this option on at the Slider settings → Slides tab.

With a lightbox slider you can enlarge an image with one click, it can be useful if you want to create a mini gallery from your slider.

Final Thoughts

The slider settings are useful part in slider creation. It is important to set them properly, but you can always change them, so if you decide to change something, just go to the slider settings, modify what you want, preview it, and if you like the result, save it.

If you are new at Smart Slider 3, I can suggest to check our Youtube channel where you can learn more from Smart Slider 3 and its settings.

The post 7 Useful Slider Settings Which You Should Know appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/slider-types/ Sun, 17 May 2020 06:38:56 +0000 https://smartslider3.com/?post_type=blog&p=20556 You can find a slider on almost any kind of website. Either you love them or hate them, sliders are incredibly versatile design elements. As a result, web designers use them for various design tasks. In order to make a slider easier to fit into a website, there are many types of sliders available. In […]

The post What Do You Need to Know About Slider Types? appeared first on Smart Slider 3 — WordPress Plugin.

]]> You can find a slider on almost any kind of website. Either you love them or hate them, sliders are incredibly versatile design elements. As a result, web designers use them for various design tasks. In order to make a slider easier to fit into a website, there are many types of sliders available. In this article we’re going to explore all there is to know about slider types.

What is a slider type?

The slider type determines the look and feel of a slider. For instance, it decides how many slides to you see together. For example, the common slider types display one slide at a time. The slider type can also control the responsive behavior of the slider.

What kind of slider types are there?

The most common slider type is the “simple” kind of slider. This slider shows one slide at a time for the visitor to view. This helps them focus on the message, one at a time, which makes this type perfect for headers or galleries. As a matter of fact, you can use this simple slider for any purpose.

The other common type is the carousel-like slider. This slider presents many slides for the visitor. As a result, each slide gets a limited space, but the visitor can browse through the slider faster. People often use such carousels for showing off products or blog posts.

What kind of slider types can you find in Smart Slider 3?

Smart Slider 3 is the most versatile slider solution for WordPress and Joomla. It’s packed with amazing features to fit everyone’s needs. With Smart Slider 3, you can create gorgeous sliders for your website. You can also use the popular design effects like parallax or Ken Burns. What’s even more, there are many different slider types to let you pick the best one for your specific needs.

The following slider types are available in Smart Slider 3:

• Simple (available in the Free version as well)
• Block (available in the Free version as well)
• Carousel
• Showcase

Simple type

Smart Slider 3’s Simple slider type looks exactly the same way as the commonly known sliders. It shows one slide at a time, so it doesn’t distract the visitor. People usually use these sliders in large size or full width size. This gives enough space for creating a slider with lots of white space.

Default responsive behavior

The Simple slider type’s responsive behavior is easy to understand. As the screen gets smaller, the slider gets smaller as well keeping the original ratio.

However, when you use Content mode, this behavior can change. Content mode can increase the height of the whole slider based on the tallest slide. So if you have at least one slide which needs lots of vertical space, that will make the other slides taller as well.

When should you use the Simple slider type?

Simple slider type is one of the most versatile slider types. It suits for any kind of sliders you can possibly create. You can use this type to create a gorgeous header slider or a full page video block. A Simple slider makes a good post and product slider as well.

Carousel type

The Carousel type lets you show many slides next to one another. As a result, you can have lots of pieces of content to occupy a single space. The visitor can switch all visible slides at a time, which lets them browse fast. If you don’t have enough slides, this can result orphan slides.

But if you would rather want them to explore your slider side by side, that’s possible as well. What’s even better that you can change the behavior with a flick of a button. With the Single Switch setting, you can avoid orphan slides in your slider.

🎓 This slider type is available in the Pro version of Smart Slider 3 only.

Default responsive behavior

The Carousel slider type displays as many slides next to one another as many can fit into the slider. It doesn’t resize the slides, as long as the last slide can’t fit anymore. For instance, you configure the carousel slider type to show 470px slides. The slides will keep this size, and the slider will rather display fewer slides. The slides are not resized until the only visible slide can fit anymore. In other words, the slide won’t resize until the slider gets smaller than 470px.

Most useful features of the Carousel Slider type

The Carousel slider type has many awesome features to fine-tune the result. Here’s some of the best options you have to customize the slider.

• Maximum pane width. You can use this setting to set the maximum number of slides for big screens. For instance, if your set it to 1200px, your slides won’t be able to take up more than the middle 1200px area of the slider. As a result, your full width slider can cover the whole browser width, but the slides will remain in the middle.
• Minimum slide distance. It’s not always pleasant to see the slide sides touching each other. This feature lets you set a minimum distance between the slides.
• Single switch. The single switch is useful to avoid orphan slides at the end of the slideshow.

Best usage of the Carousel slider type

Not sure how to make the most out of your Carousel slider? Here are 5 amazing usage examples for your website.

• Post slider: Due to the nature of carousels, they make excellent post sliders. A single slide doesn’t take up much space, but still allows the visitor to learn more about the post.
• Product slider: Showing a couple of products next to one another is a common practice on ecommerce sites. A product slider allows the visitor to quickly browse the products in a visually pleasing way.
• Testimonial slider: Testimonials are essential for any online business. A testimonial carousel helps you display them in a modern way.
• Thumbnail gallery: The size and resolution of an image matters for photographers. As a matter of fact, good quality photos which photographers need are often heavy and take a long time to load. With a small thumbnail gallery you can speed up your site, because you don’t need to load the big images with the page. Then using the lightbox feature you can let your visitor enlarge the picture and enjoy it in full detail.
• Logo slider: Companies that use your product or service can help to build trust in your future customers. After all, if a service is good enough for Google or Amazon, it’s surely good enough for them, right?

Showcase type

Like the Carousel, the Showcase lets you display many slides next to one another. However, there’s a major difference between their behavior. The Showcase type makes the visitors focus on one slide which is in the middle. You can make the rest of the slide semi-transparent or smaller to help direct the visitor’s focus. Unlike Carousel sliders, they can have a fixed distance between the slides.

Default responsive behavior

The Showcase slider type’s default responsive behavior is quite simple. You’ll see the same amount of slides on different screens, regardless of the screen size. For example, on desktop you see the active slide and half of the next and previous slides. If you switch to mobile, you’ll see that many slides as well. However, you might see less of the next and previous slides.

What are the best usages of a Showcase slider?

With a showcase type slider, you can make your visitor focus on one slide while letting them see others. As a result, you can promote your posts or products without distracting them. Showcase sliders are also great for an image gallery.

Super cool features to make your Showcase slider more unique

The Showcase type has a bunch of cool animation settings. Let’s see some of the best ones you can use to make your slider stand out of the crowd.

• Direction. By default the Showcase type has horizontal orientation. But you can change that with a flick of a button. However, it’s also worth changing the slider and slide size settings for the best result.
• Opacity. Showcase sliders make the visitors focus on the middle slide. To make this slide stand out even more, you can make the other slides semi-transparent. If you would like to have a darkened/lightened shade, set a background color for the slider.
• Scale. Scaling is another great way to let your visitor know which is the slide they should interact with. For instance, you can make the slides on the left and right smaller, which directs the focus towards the one in the middle.
• Slide distance. If you use the Showcase slider type, you can make the slides have a fixed distance. As a result, you can create a nice spacing between your slides.

Block type

With Smart Slider 3 you can create more than just what people usually think of when they hear the word “slider”. A slider contains a set of slides which can move automatically or on user demand. A block, on the other hand, has one single slide. As a result, it loads faster than the other slider types while letting you use Smart Slider 3’s awesome features.

When it comes to the responsive behavior, the Block type acts as the Simple type. It gets smaller as the screen gets smaller, and the Content mode can also increase its height.

Best usage of the Block sliders

Block sliders make amazing headers. They’re lightweight and load fast, but they let you create awesome effects. You can also add shape dividers to them and use them to break your page’s layout with a cool effect.

Final thoughts

Slider types help you control the look and behavior of your slider. Finding the best slider type can be essential to define the purpose of your slider. What’s even more, the type of your slider can also play a huge role to enhance the user experience.

The post What Do You Need to Know About Slider Types? appeared first on Smart Slider 3 — WordPress Plugin.