A website slider is a succession of images that come onto the screen one after another. They appear in the foreground either automatically or being accessed by users.
Note: sometimes, people confuse slider with slideshow or carousel. Here’s the difference among them:
= a slider includes multiple slides (images) that are displayed one after another, one slide at a time.
Example of Colibri slider:
= a slideshow includes a single content version and multiple background images (slides). Background images are displayed one after another, one at a time. The background slides change automatically.
Example of Colibri slideshow:
= a carousel includes multiple images, and several images are displayed at the same time onto the screen, until the next group of images comes in.
Example of Colibri carousel:
It’s important to make the difference among them, as there are distinctions in style and functionality.
*In this article, we’ll use “slider” as an umbrella term for all the three variations of this component.
First, let’s see the different types of sliders web designers can choose:
The slider is composed of two or more slides, coming onto the screen one at a time. Users go from one slide to another by pressing the left/right arrow, or the succession can be set to automatic. There’s also a Dots component, that marks the passage from one slide to another, and what’s the current slide being displayed onto the screen.
This type of slider brings to front one slide at a time. The adjacent slides are kept in the background, and they’re marked with an overlay color that makes them less obvious than the main slide. Also, there’s the Dots component that signals what slide is currently being viewed.
Horizontal accordion slider
This is an example:
The horizontal accordion slider supposes that users go from one slide to another by clicking on the accordion tabs listed one under another. In the example above, the third tab is open by default. You open the next tabs by clicking on the tab label.
Vertical accordion slider
This is an example:
The tabs are arranged one under another, on a vertical axis.
Clicking on the upper or bottom arrow will pass users from one slide to another, in descending or ascending order. The mechanism can be replicated by clicking on each tab, to open the corresponding content, as in the case of accordions.
Thumbnail horizontal slider
A thumbnail horizontal slider looks like in the image above. At the bottom of the slider there’s a row of thumbnails. These come one next to the other. Once you press upon one thumbnail, you open that slide content in the upper part of the component. The thumbnails can rotate if you press the side arrows.
Thumbnail vertical slider
The thumbnail vertical slider implies a positioning of the tabs on a vertical axis. This type of slider appears like in the image below.
The thumbnails are on a vertical axis, one under another. You can make the passage from one thumbnail to another by using the upper or bottom arrows. Then, when you click on a thumbnail, the corresponding content opens in the main area of the component.
The full-width slider, as the name itself suggest, occupies the whole screen.
When you click on a button, the slide occupying the whole screen changes, leaving room to another slide to come onto the screen.
It’s current practice to use sliders in websites. They’re frequent in homepage Headers. Web designers prefer them due to their visual attractiveness and some advantages they bring to websites. However, sliders are also subject to controversy.
Therefore, let’s see a breakdown of advantages and disadvantages of website sliders:
Advantages of a website slider
1. Sliders incorporate much information in a reduced space (each slide expands the corresponding content only when it comes onto the screen). You can compress the information within a certain space, and users can consult it on demand, only when they find it helpful for their browsing session in the website.
2. Sliders are good for engaging users from the very first instant they enter the homepage of a website. They can increase visitors’ engagement, the comprehension and retention of information.
3. Sliders are user-directed, they give more control to users, who can decide for themselves if they need to focus on one slide content or not. They help visitors focus on what’s important and they can access the respective information when they want.
4. Meanwhile, sliders are a one-stop point for users, before they start on a long journey. This may orient them towards one direction of content navigation or another.
5. Sliders are visually appealing. They’re beautiful, pleasant to see, and they’re often the first element users encounter when entering a website. They’re effective, they create an impact for users through their agreeable aspect.
6. They’re good for optimal display of testimonials. Especially carousels. This component prevents website pages from having too much content, especially when users “consume” such content randomly.
7. Sliders and carousels are a good choice for dynamically updating content (there might be new content you want to showcase, and this component comes in handy. One example is that of a blog one constantly updates with new posts; and you can incorporate new posts into a slider/carousel that displays on the blog homepage).
8. Also, sliders and carousels work well for product tours. They present different angles of the same product, in an interactive and pleasant manner.
9. Last, but not least, sliders help web designers create innovative pages. Due to their dynamism and visual appeal, they’re a handy solution for innovating in a page design style. Therefore, such pages are easier to remember and return to.
Disadvantages of a website slider
2. Some hold the opinion that sliders result in less conversions. However, sliders generally display as the first element in a website homepage. And it’s hard to conclude that conversions take place at that point in visiting a website. If conversion-supporting items are present in a page and down the sales funnel, you don’t need to worry. Setup for boosting conversions doesn’t rely on sliders in the homepage Header.
3. Sliders allegedly trigger banner blindness. According to NN Group, banner blindness refers to people’s tendency to ignore page elements they consider to be ads. However, it’s your choice of what to include in the website slider that makes a major difference. A slider with meaningful content, a carefully crafted message and optimal typography won’t fall into this banner blindness trap.
4. Some people recommend replacing sliders with static images. But there’s not one to prefer over the other. Static Hero images have their role in a homepage, whereas sliders should trigger a different result. Their purpose is to boost interaction and add dynamism to the page, while compressing useful information in a certain amount of space.
5. Another counterargument is sliders aren’t good for mobile website, as they aren’t mobile-responsive. You should test and see if it works both on desktop and mobile devices, as mobile responsiveness is important.
As you can see, there are more pros than cons related to sliders. And to the question: “Should I use a website slider?”, the answer is: it depends. Precisely, it depends on what’s your purpose for that slider, and what you want to include in its slides.
If you decided in favour of a slider, after having analysed these factors, consider the following tips:
Tips and best practices for a website slider
- According to this study, the first three slides are the most clicked:
So, you should focus on no more than three slides, and you should concentrate your efforts in making them compelling.
- Keep in mind that sliders are especially successful in ecommerce websites, for product detail pages. They help present a product from different angles, which brings the online experience closer to that of a physical shop.
So, if your website is an online shop, consider including sliders for the most important pages, that is product pages.
As a conclusion
Remember there’s a difference among sliders, slideshows and carousels. Each has its design, and each has a somehow different purpose. Depending on what you use them for, it’s important to correctly make the distinction among these three components (they’re generically named all “Sliders”).
The above analysis of slider plus and minuses should give you a clear idea of whether, when and how to use this component.
Using a website slider is easy, and they might make the difference.
We’d love to see your ideas, your experience in using sliders, and your opinions on this subject. Please share them in the comments below and let us all be inspired.