{"id":1818,"date":"2023-05-09T13:18:55","date_gmt":"2023-05-09T11:18:55","guid":{"rendered":"https:\/\/queiku.es\/sliders-on-websites\/"},"modified":"2026-05-29T00:02:00","modified_gmt":"2026-05-28T22:02:00","slug":"sliders-on-websites","status":"publish","type":"post","link":"https:\/\/queiku.es\/en\/sliders-on-websites\/","title":{"rendered":"Sliders on websites"},"content":{"rendered":"\n<h3 id=\"why-they-arent-always-a-good-idea-and-what-alternatives-might-work-better\" class=\"wp-block-heading\">Why they aren&#8217;t always a good idea and what alternatives might work better<\/h3>\n\n<p>Sliders remain a common feature on many websites, especially when the goal is to display multiple messages in a single space. However, they don\u2019t always improve communication. In many cases, they can slow down performance, hinder the user experience, and hide information that should be visible right from the start.  <\/p>\n\n<p>Therefore, before adding a slider, it\u2019s a good idea to consider whether it actually adds value to the page or if there are clearer, faster, and more effective alternatives for guiding the user.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"what-is-a-slider-on-a-website\" class=\"wp-block-heading\">What is a slider on a website?<\/h3>\n\n<p>A slider, also known as a carousel, is a content block that displays multiple slides within a single area of a website. It can include images, text, buttons, promotions, featured services, or news. <\/p>\n\n<p>It usually appears at the top of a page, although it can also be used in galleries, product pages, testimonials, or sidebars.<\/p>\n\n<p>The problem isn&#8217;t so much with the feature itself, but rather with how it&#8217;s used. Often, the slider is used as a way to avoid making decisions: instead of choosing a single main message, several messages are displayed in rotation in the hope that the user will see them all. <\/p>\n\n<p>And that&#8217;s where the conflict begins.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"why-are-they-still-so-widely-used\" class=\"wp-block-heading\">Why are they still so widely used?<\/h3>\n\n<p>Sliders are still used because they\u2019re visually appealing at first glance. They create a sense of movement, allow you to display multiple images, and seem like a neat solution when a company has a lot of messages it wants to highlight. <\/p>\n\n<p>They\u2019re also popular because they give the impression that the website is more \u201cdynamic\u201d or comprehensive. For many businesses, including news, promotions, or services that are constantly updated seems like a way to demonstrate activity. <\/p>\n\n<p>But a website shouldn&#8217;t be built solely with what we want to show in mind, but rather with what the user needs to understand.<\/p>\n\n<p>If everything is important, nothing really stands out. And when we force users to wait, click, or interact to discover relevant information, we\u2019re putting a small barrier between them and the content. <\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"the-main-problem-not-everything-that-matters-is-visible\" class=\"wp-block-heading\">The main problem: not everything that matters is visible<\/h3>\n\n<p>The natural way to navigate a webpage is usually vertical. The user arrives, reads, scrolls down, compares, makes a decision, and moves on. A slider can disrupt that flow, especially if it requires the user to wait or interact in order to view the full content.  <\/p>\n\n<p>It can also be confusing if the pace is too fast, if the text is too long, if the buttons aren&#8217;t clear, or if each slide conveys a different message.<\/p>\n\n<p>It\u2019s not just a matter of visual preference. <a href=\"https:\/\/www.orbitmedia.com\/blog\/rotating-sliders-hurt-website\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Orbit Media<\/a> has compiled various analyses of carousel sliders that point to a common problem: they tend to generate little interaction and can detract from the main message of a page.<\/p>\n\n<p>A common mistake is to use the slider as a container for a variety of messages: a promotion, a news item, a service, a campaign, a notice, and a call to action. Although it may look organized visually, it can come across as scattered to the user. <\/p>\n\n<p>The user experience improves when every section of the website has a clear purpose. If we want users to get in touch, the message should guide them toward that action. If we want them to understand a service, the content should explain it clearly. If we want to highlight a promotion, it may need its own dedicated space.   <\/p>\n\n<p>Movement, on its own, does not improve communication. Sometimes it even undermines it. <\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"sliders-and-web-performance\" class=\"wp-block-heading\">Sliders and web performance<\/h3>\n\n<p>Another common issue with sliders is performance.<\/p>\n\n<p>A slider typically requires large images, additional styles, JavaScript, and, in many cases, specific plugins. All of this can increase the page\u2019s file size and affect loading times, especially on mobile devices or slower connections. <\/p>\n\n<p>This doesn&#8217;t mean that a slider can&#8217;t be optimized. You can adjust the size of the images, control which resources are loaded, tweak how it behaves on mobile devices, and avoid unnecessary effects. But then you need to consider whether all that effort is worth it.  <\/p>\n\n<p>If the slider occupies a highly visible area of the website, displays multiple images, and most users only pay attention to the first one, perhaps the solution isn&#8217;t to optimize it further, but to rethink it.<\/p>\n\n<p>In web design, the best optimization is often not technical, but strategic: <strong>showing only what truly adds value.<\/strong><\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"sliders-and-user-experience\" class=\"wp-block-heading\">Sliders and user experience<\/h3>\n\n<p>The natural way to navigate a webpage is usually vertical. The user arrives, reads, scrolls down, compares, makes a decision, and moves on. A slider can disrupt that flow, especially if it requires the user to wait or interact in order to view the full content.  <\/p>\n\n<p>It can also be confusing if the pace is too fast, if the text is too long, if the buttons aren&#8217;t clear, or if each slide conveys a different message.<\/p>\n\n<p>A common mistake is to use the slider as a container for a variety of messages: a promotion, a news item, a service, a campaign, a notice, and a call to action. Although it may look organized visually, it can come across as scattered to the user. <\/p>\n\n<p>The user experience improves when every section of the website has a clear purpose. If we want users to get in touch, the message should guide them toward that action. If we want them to understand a service, the content should explain it clearly. If we want to highlight a promotion, it may need its own dedicated space.   <\/p>\n\n<p>Movement, on its own, does not improve communication. Sometimes it even undermines it. <\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"sliders-and-seo\" class=\"wp-block-heading\">Sliders and SEO<\/h3>\n\n<p>SEO doesn&#8217;t depend solely on whether or not you have a slider, but this type of element can indirectly affect several important aspects.<\/p>\n\n<p>On the one hand, if the slider slows down page loading, it can negatively impact the user experience. Google takes into account signals related to page experience and performance, such as loading speed, interactivity, and visual stability. <\/p>\n\n<p>On the other hand, if we include important messages in slides that aren\u2019t clearly visible or that rely too heavily on scripts, we may be making the content structure less clear.<\/p>\n\n<p>From an SEO perspective, it\u2019s usually best for the main messages to be well integrated into the page, with clear headings, visible text, and a simple hierarchy.<\/p>\n\n<p>It&#8217;s not just about Google being able to read the content. It&#8217;s also about users being able to understand it quickly. <\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"sliders-and-accessibility\" class=\"wp-block-heading\">Sliders and accessibility<\/h3>\n\n<p>Accessibility is another key point.<\/p>\n\n<p>A poorly designed slider can be difficult to use for people with visual, cognitive, or mobility impairments. If the content moves automatically, changes too quickly, or if the controls are small and unclear, the experience can become challenging. <\/p>\n\n<p>There are also users who navigate using a keyboard, screen readers, or other assistive devices. For them, a carousel can be problematic if it isn&#8217;t designed properly. <\/p>\n\n<p>Therefore, if you decide to use a slider, it should have clear controls, allow you to pause the movement, work properly with a keyboard, not change too quickly, and maintain an easy-to-understand structure.<\/p>\n\n<p>But, again, you have to consider whether it\u2019s worth adding all that complexity when the same content could perhaps be presented using a static block, which is clearer and more accessible.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"when-it-might-make-sense-to-use-a-slider\" class=\"wp-block-heading\">When it might make sense to use a slider<\/h3>\n\n<p>Although we don&#8217;t usually recommend sliders as the main feature of a homepage, there are cases where they can make sense.<\/p>\n\n<p>For example, on a product page, an image carousel can be useful for showing different angles, details, or uses of the product. <a href=\"https:\/\/www.orbitmedia.com\/blog\/rotating-sliders-hurt-website\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Orbit Media cites studies<\/a> showing that sliders used on product pages\u2014especially on mobile devices and when users choose to manually scroll through them\u2014can generate significantly higher levels of engagement than homepage carousels.<\/p>\n\n<p>They can also be used in image galleries, portfolios, testimonials, or secondary content, as long as they don&#8217;t obscure key information.<\/p>\n\n<p>The difference lies in the context. A slider that displays supplementary photos of a product is not the same as a slider in the header of the home page where important marketing messages are hidden. <\/p>\n\n<p>A slider can be useful when:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>The user expects to see several related images;<\/li>\n\n\n\n<li>the content is not essential to understanding the page;<\/li>\n\n\n\n<li>does not move in an annoying or overly fast manner;<\/li>\n\n\n\n<li>has clear controls;<\/li>\n\n\n\n<li>is well optimized;<\/li>\n\n\n\n<li>It does not replace a main message that should be visible from the very beginning.<\/li>\n<\/ul>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"more-effective-alternatives-to-a-slider\" class=\"wp-block-heading\">More effective alternatives to a slider<\/h3>\n\n<p>When you want to use a slider, there\u2019s usually a reason behind it: to highlight various messages, showcase products, feature promotions, display news, or make the page more dynamic.<\/p>\n\n<p>The goal may be right, but the approach isn&#8217;t always the best.<\/p>\n\n<p>Some alternatives tend to work better:<\/p>\n\n<h4 id=\"a-clear-hero-section-with-a-single-main-message\" class=\"wp-block-heading\"><strong>A clear hero section with a single main message<\/strong><\/h4>\n\n<p>If there\u2019s a key message, it\u2019s best to give it real prominence. A clear headline, concise text, and a well-crafted call to action are usually more effective than several slides vying for attention. <\/p>\n\n<h4 id=\"blocks-highlighted-by-priority\" class=\"wp-block-heading\"><strong>Blocks highlighted by priority<\/strong><\/h4>\n\n<p>Instead of rotating content, it can be organized into visible sections. This way, users don&#8217;t have to wait or click to discover them. <\/p>\n\n<h4 id=\"static-banners\" class=\"wp-block-heading\"><strong>Static banners<\/strong><\/h4>\n\n<p>For promotions, campaigns, or important announcements, a fixed banner can be more effective and use fewer resources.<\/p>\n\n<h4 id=\"service-or-product-cards\" class=\"wp-block-heading\"><strong>Service or product cards<\/strong><\/h4>\n\n<p>When there are several options, a card grid can help users compare and choose.<\/p>\n\n<h4 id=\"temporary-sections-on-the-home-page\" class=\"wp-block-heading\"><strong>Temporary sections on the home page<\/strong><\/h4>\n\n<p>If you want to highlight a new feature, a campaign, or a news item, you can create a temporary section and remove it once it is no longer relevant.<\/p>\n\n<p>In <a href=\"https:\/\/angner.com\/blog\/will-front-page-carousels-improve-your-conversion-rate\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">the study cited by M\u00e5rten Angner<\/a>, a static, optimized version of the header section of an online store generated significantly more engagement than the original slider. This case should not be interpreted as a universal rule, but it is a positive sign: often, a well-designed static solution can perform better than a moving element. <\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 id=\"summary\" class=\"wp-block-heading\">Summary<\/h3>\n\n<p>Sliders aren&#8217;t always a bad idea, but they&#8217;re often used to solve a problem that&#8217;s really about strategy, hierarchy, and clarity. When a website tries to display too much information in the same space, the result can be less effective: users see less, understand less, and have a harder time navigating. <\/p>\n\n<p>That\u2019s why, before adding a slider, it\u2019s a good idea to ask yourself:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Which message is truly the top priority?<\/li>\n\n\n\n<li>Does the user need to view several slides to understand the page?<\/li>\n\n\n\n<li>Are we hiding important content?<\/li>\n\n\n\n<li>Does the movement add value, or is it just for show?<\/li>\n\n\n\n<li>Is there a clearer, faster, and easier-to-use alternative?<\/li>\n<\/ul>\n\n<p>In most cases, a website works best when it helps users quickly understand what a company offers, why it should be of interest to them, and what the next step is.<\/p>\n\n<p>Sometimes, communicating more effectively isn&#8217;t about showing more things, but about choosing more carefully what to show first.<\/p>\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<div class=\"wp-block-group fuentes is-layout-constrained wp-block-group-is-layout-constrained\">\n<h5 id=\"sources\" class=\"wp-block-heading\">Sources<\/h5>\n\n\n\n<p><a href=\"https:\/\/erikrunyon.com\/2013\/01\/carousel-interaction-stats\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Erik Runyon \u2014 Carousel Interaction Stats<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.orbitmedia.com\/blog\/rotating-sliders-hurt-website\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Orbit Media \u2014 Do Rotating Sliders Help or Hurt Your Website?<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/prezi.com\/e9-zaikclehn\/will-front-page-carousels-improve-your-conversion-rate\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">M\u00e5rten Angner \u2014 Will front page carousels improve your conversion rate?<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2015\/02\/carousel-usage-exploration-on-mobile-e-commerce-websites\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Smashing Magazine \u2014 An Exploration Of Carousel Usage On Mobile E-Commerce Websites<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.sarahdoody.com\/ux-articles\/page\/16\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Sarah Doody \u2014 UX Articles<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>When to avoid sliders and what alternatives can help convey your message more effectively.<\/p>\n","protected":false},"author":1,"featured_media":1817,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","inline_featured_image":false,"footnotes":""},"categories":[58,59],"tags":[],"class_list":["post-1818","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-performance","category-web-design"],"_links":{"self":[{"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/posts\/1818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/comments?post=1818"}],"version-history":[{"count":1,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/posts\/1818\/revisions"}],"predecessor-version":[{"id":1820,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/posts\/1818\/revisions\/1820"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/media\/1817"}],"wp:attachment":[{"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/media?parent=1818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/categories?post=1818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/queiku.es\/en\/wp-json\/wp\/v2\/tags?post=1818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}