{"id":5057,"date":"2020-03-16T13:53:09","date_gmt":"2020-03-16T13:53:09","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=5057"},"modified":"2020-04-02T14:08:59","modified_gmt":"2020-04-02T14:08:59","slug":"website-slider","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/website-slider\/","title":{"rendered":"Why Is It Good to Use a Website Slider?"},"content":{"rendered":"

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.<\/p>\n

Note<\/em>: sometimes, people confuse slider with slideshow or carousel. Here\u2019s the difference among them:<\/p>\n

<\/h2>\n

Slider<\/h2>\n

= a slider includes multiple slides (images) that are displayed one after another, one slide at a time.<\/p>\n

Example of Colibri slider<\/a>:<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Slideshow<\/h2>\n

= 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.<\/p>\n

Example of Colibri slideshow<\/a>:<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Carousel<\/h2>\n

= 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.<\/p>\n

Example of Colibri carousel<\/a>:<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

It\u2019s important to make the difference among them, as there are distinctions in style and functionality.<\/p>\n

*In this article, we\u2019ll use \u201cslider\u201d as an umbrella term for all the three variations of this component.<\/p>\n

First, let\u2019s see the different types of sliders web designers can choose:<\/p>\n

 <\/p>\n

Standard slider<\/span><\/a><\/h3>\n

 <\/p>\n

\"\"<\/p>\n

Standard Slider<\/p>\n

 <\/p>\n

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\u2019s also a Dots component, that marks the passage from one slide to another, and what\u2019s the current slide being displayed onto the screen.<\/p>\n

<\/h3>\n

Showcase<\/span><\/h3>\n

 <\/p>\n

\"\"<\/p>\n

Showcase Slider<\/a><\/p>\n

 <\/p>\n

This type of slider brings to front one slide at a time. The adjacent slides are kept in the background, and they\u2019re marked with an overlay color that makes them less obvious than the main slide. Also, there\u2019s the Dots component that signals what slide is currently being viewed.<\/p>\n

 <\/p>\n

Horizontal accordion slider<\/span><\/h3>\n

 <\/p>\n

This is an example:<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Horizontal accordion slider<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

 <\/p>\n

Vertical accordion slider<\/span><\/h3>\n

 <\/p>\n

This is an example:<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Vertical accordion slider<\/a><\/p>\n

 <\/p>\n

The tabs are arranged one under another, on a vertical axis.<\/p>\n

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.<\/p>\n

 <\/p>\n

Thumbnail horizontal slider<\/span><\/h3>\n

 <\/p>\n

\"\"<\/p>\n

Thumbnail horizontal slider<\/a><\/p>\n

 <\/p>\n

A thumbnail horizontal slider looks like in the image above. At the bottom of the slider there\u2019s 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.<\/p>\n

 <\/p>\n

Thumbnail vertical slider<\/span><\/h3>\n

 <\/p>\n

The thumbnail vertical slider implies a positioning of the tabs on a vertical axis. This type of slider appears like in the image below.<\/p>\n

\"\"<\/p>\n

Thumbnail vertical slider<\/a><\/p>\n

 <\/p>\n

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.<\/p>\n

 <\/p>\n

 <\/p>\n

Full-width slider<\/span><\/h3>\n

 <\/p>\n

The full-width slider, as the name itself suggest, occupies the whole screen.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Full-width slider<\/a><\/p>\n

 <\/p>\n

When you click on a button, the slide occupying the whole screen changes, leaving room to another slide to come onto the screen.<\/p>\n

 <\/p>\n

It\u2019s current practice to use sliders in websites. They\u2019re 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.<\/p>\n

Therefore, let\u2019s see a breakdown of advantages and disadvantages of website sliders:<\/p>\n

 <\/p>\n

Advantages of a website slider<\/h2>\n

\u00a0<\/strong><\/p>\n

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.<\/p>\n

 <\/p>\n

2. Sliders are good for engaging users from the very first instant they enter the homepage of a website. They can increase visitors\u2019 engagement, the comprehension and retention of information.<\/p>\n

\u00a0<\/strong><\/p>\n

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\u2019s important and they can access the respective information when they want.<\/p>\n

\u00a0<\/strong><\/p>\n

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.<\/p>\n

\u00a0<\/strong>\u00a0<\/strong><\/p>\n

5. Sliders are visually appealing. They\u2019re beautiful, pleasant to see, and they\u2019re often the first element users encounter when entering a website. They\u2019re effective, they create an impact for users through their agreeable aspect.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Source<\/a><\/p>\n

 <\/p>\n

6. They\u2019re good for optimal display of testimonials. Especially carousels. This component prevents website pages from having too much content, especially when users \u201cconsume\u201d such content randomly.<\/p>\n

 <\/p>\n

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).<\/p>\n

 <\/p>\n

8. Also, sliders and carousels work well for product tours. They present different angles of the same product, in an interactive and pleasant manner.<\/p>\n

 <\/p>\n

9. Last, but not least, sliders help web designers create innovative pages. Due to their dynamism and visual appeal, they\u2019re a handy solution for innovating in a page design style. Therefore, such pages are easier to remember and return to.<\/p>\n

 <\/p>\n

 <\/p>\n

Disadvantages of a website slider<\/h2>\n

\u00a0<\/strong><\/p>\n

1. Slider slow down the website, by loading extra JavaScript. So, you should care for minimizing their impact onto the page loading speed. You can check the other elements in the page and avoid charging that page with additional complex items.<\/p>\n

 <\/p>\n

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\u2019s 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\u2019t need to worry. Setup for boosting conversions doesn\u2019t rely on sliders in the homepage Header.<\/p>\n

 <\/p>\n

3. Sliders allegedly trigger banner blindness. According to NN Group<\/a>, banner blindness refers to people\u2019s tendency to ignore page elements they consider to be ads. However, it\u2019s 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\u2019t fall into this banner blindness trap.<\/p>\n

 <\/p>\n

4. Some people recommend replacing sliders with static images. But there\u2019s 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.<\/p>\n

 <\/p>\n

5. Another counterargument is sliders aren\u2019t good for mobile website, as they aren\u2019t mobile-responsive. You should test and see if it works both on desktop and mobile devices, as mobile responsiveness is important.<\/p>\n

 <\/p>\n

As you can see, there are more pros than cons related to sliders<\/a>. And to the question: \u201cShould I use a website slider?\u201d, the answer is: it depends. Precisely, it depends on what\u2019s your purpose for that slider, and what you want to include in its slides.<\/p>\n

If you decided in favour of a slider, after having analysed these factors, consider the following tips:<\/p>\n

 <\/p>\n

Tips and best practices for a website slider<\/h2>\n

 <\/p>\n