{"id":28466,"date":"2018-11-14T21:01:09","date_gmt":"2018-11-14T13:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28466"},"modified":"2022-10-14T18:11:51","modified_gmt":"2022-10-14T10:11:51","slug":"image-carousels-tips","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/","title":{"rendered":"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices"},"content":{"rendered":"<p>There\u2019s no shortage of <strong>carousel feature slideshows<\/strong> on the web. In fact, this trend has done nothing but <strong>grow in the past 5-10 years<\/strong> with more browser support now than ever before. But are image carousels really worth the effort? What sorts of benefits do they produce, and how should they be used productively in a layout?<\/p>\n<p>I\u2019d like to share some <strong>common trends, live examples, and ideas<\/strong> for web designers interested in image carousels. These dynamic sliders are <a href=\"https:\/\/cxl.com\/blog\/dont-use-automatic-image-sliders-or-carousels\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">heavily debated<\/a>, but I do think they add value when crafted in the right context.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/photo-gallery-slideshow-wordpress-plugins\/\" class=\"ref-block__link\" title=\"Read More: 10 Best Photo Gallery & Slideshow WordPress Plugins\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 Best Photo Gallery & Slideshow WordPress Plugins<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/photo-gallery-slideshow-wordpress-plugins.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-56022 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/photo-gallery-slideshow-wordpress-plugins.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 Best Photo Gallery & Slideshow WordPress Plugins<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tFor any portfolio or image-oriented website running on WordPress, it is imperative to have a photo gallery and...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Product carousels for e-commerce<\/h2>\n<p>The world of e-commerce is full of rotating carousels on home pages and product pages. The goal is to <strong>maintain a clear information density<\/strong> with photos and text that <strong>tell a unique yet valuable story<\/strong> to help sell products.<\/p>\n<p>There are <strong>two primary placements<\/strong> for an e-commerce product slider:<\/p>\n<ol>\n<li>On a shop\u2019s home page<\/li>\n<li>On a product page<\/li>\n<\/ol>\n<p>They both work differently but <strong>serve the same goal<\/strong> \u2014 to sell products in a visual manner.<\/p>\n<h3>Example 1: Au Lit Fine Linens \u2013 home page<\/h3>\n<p>Take a look at the home page for <a href=\"https:\/\/www.aulitfinelinens.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Au Lit Fine Linens<\/a>, that <strong>uses a fullscreen auto-rotating carousel<\/strong> to show off different products, such as duvets, pillows, and bed covers.<\/p>\n<figure><a href=\"https:\/\/www.aulitfinelinens.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/01-au-lit-fine-linens.jpg\" alt=\"Au Lit Fine Linens Home Page\" width=\"800\" height=\"543\"><\/a><\/figure>\n<p>The images <strong>take up the full width<\/strong> of the home page, and they <strong>appear well above the fold<\/strong>. In fact, this slider should be the very first thing to catch your attention when first landing on the page. Each slide leads to a different page on the site to <strong>guide customers through the shopping experience<\/strong>.<\/p>\n<p>This slider can be a tad intimidating when first landing on the page, but with the <strong>button link<\/strong> and <strong>overlay text<\/strong> it can also be very encouraging to visitors who just want to dive in and shop.<\/p>\n<h3>Example 2: Eden phone case \u2013 product page<\/h3>\n<p>It uses an <strong>auto-rotating slider<\/strong> to show off images of the product.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/02-eden-made-boxes.jpg\" alt=\"Eden Boxes Case Product Page\" width=\"800\" height=\"510\"><\/figure>\n<p>I find these to be a little \u201ctoo much\u201d in the world of e-commerce. When looking at a product I want to be <strong>in control of switching between images<\/strong>.<\/p>\n<p>The better choice is to do a gallery of images <strong>with control given to the visitor<\/strong>. For instance, the <a href=\"https:\/\/www.designbyhumans.com\/shop\/?error=product_removed\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Design by Humans page<\/a> uses <strong>thumbnails for each photo<\/strong> which is much more encouraging, and grants more control to the user.<\/p>\n<h2>Web portfolio carousels<\/h2>\n<p>Online website portfolios are a bit different because these slides <strong>don\u2019t always click through to another page<\/strong>. It\u2019s true that some will lead to a case study or write up about a project, but many carousels on portfolio websites are just meant to <strong>show off visual work<\/strong>.<\/p>\n<h3>Example 1: Biboun \u2013 home page<\/h3>\n<p>The French artist working under the name <a href=\"http:\/\/www.biboun.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Biboun<\/a> has a <strong>carousel slider<\/strong> on the home page <strong>featuring snippets of artwork<\/strong>. The individual slides lead to internal pages in the portfolio which <strong>cover an entire project<\/strong> with multiple photos.<\/p>\n<figure><a href=\"http:\/\/www.biboun.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/03-biboun-portfolio-art-slider-carousel.jpg\" alt=\"Biboun Home Page\" width=\"800\" height=\"768\"><\/a><\/figure>\n<p>This is probably <strong>the best way to do a slider<\/strong> on a portfolio website. Just showcasing a random list of work is pointless unless those specific works have a reason to be showcased.<\/p>\n<p>All of the pieces are <strong>exquisite<\/strong> in Biboun\u2019s slider, and it <strong>doesn\u2019t take up much room<\/strong> either. Although I know some people hate the auto-rotating slideshows for good reason, on such a minimalist layout I have a difficult time complaining about this design feature.<\/p>\n<h3>Example 2: Aaron Blaise\u2019s website \u2013 home page<\/h3>\n<p>I really like the example found on <a href=\"https:\/\/creatureartteacher.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Aaron Blaise\u2019s website<\/a> because he <strong>showcases his work as a portfolio<\/strong>, but mostly uses this website to <strong>sell his art videos<\/strong>. Aaron Blaise worked at Disney for a couple decades, and he has the skillset to prove it.<\/p>\n<figure><a href=\"https:\/\/creatureartteacher.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/04-aaron-blaise-creature-teacher.jpg\" alt=\"Aaron Blaise Art Teacher Home Page\" width=\"800\" height=\"526\"><\/a><\/figure>\n<p>While the home page slider on his site does auto-rotate, I don\u2019t find it incredibly annoying or out of place. Each slide <strong>has a bit of content relevant to the image<\/strong>, and it helps Aaron <strong>draw attention to his latest video lessons<\/strong> that teach young artists how to master specific skills.<\/p>\n<p>A great portfolio carousel <strong>focuses on visuals<\/strong>, and <strong>leads visitors further<\/strong> into the website. If you can get these two things then I wouldn\u2019t be against a feature like this in a personal portfolio website.<\/p>\n<h2>Common design trends<\/h2>\n<p>If you look at some of my above examples you\u2019ll notice there\u2019s generally two different types of sliders: <strong>fullscreen<\/strong> and <strong>fixed width<\/strong>.<\/p>\n<p>These stylistic choices often <strong>relate to the layout<\/strong> and to how much content it can hold. If a layout spans the full width of the page then it makes sense to widen out the slider too. But this also forces you to <strong>find high-quality images<\/strong> that still look good at full screen on large resolution monitors.<\/p>\n<p>I personally prefer the fixed width style like you\u2019ll see in the two art portfolio examples. These are <strong>much easier to control<\/strong>, and they\u2019re often <strong>not as tall<\/strong> \u2014 making it easier for visitors to <strong>simply ignore them<\/strong> if they wish.<\/p>\n<p>Also consider the value of auto-advancing slides, and <strong>how difficult it can be<\/strong> for users to catch this content. There\u2019s a great <a href=\"https:\/\/www.nngroup.com\/articles\/auto-forwarding\/\" target=\"_blank\" rel=\"noopener noreferrer\">case study<\/a> by the Nielsen Norman Group showing that it\u2019s better <strong>not to have auto-advancing sliders<\/strong>.<\/p>\n<p>I\u2019m on board with this approach in the sense that it\u2019s <strong>less intensive on memory<\/strong> with less animations and motion in the browser, and most people don\u2019t like auto-rotating carousels either \u2014 and you should always <strong>cater to your audience<\/strong>.<\/p>\n<p>However I can\u2019t say that it\u2019s never worth adding an auto-advancing slider, especially since with static sliders you <strong>don\u2019t get as many views<\/strong>, and you also need to <strong>make your first slide the most important<\/strong> as many users won\u2019t proceed to the next slide. Deciding whether to make a slider auto-rotating or not is unfortunately an <strong>area of trial-and-error<\/strong>.<\/p>\n<h3>What to avoid at all costs<\/h3>\n<p>Here\u2019s an important thing that I personally think <strong>falls under \u201cavoid at all costs\u201d<\/strong>. Have a look at or click on the screenshot below, and try to guess what it may be.<\/p>\n<figure><a href=\"https:\/\/yozenn.com.br\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/05-yozenn-coffee.jpg\" alt=\"Yozenn Cafe Home Page\" width=\"800\" height=\"402\"><\/a><\/figure>\n<p>The <a href=\"https:\/\/yozenn.com.br\/\" target=\"_blank\" rel=\"noopener noreferrer\">Yozenn cafe<\/a> website uses a fullscreen header slider. It does not auto-rotate which is great, however the slides also <strong>serve no purpose other than decoration<\/strong>.<\/p>\n<p>The images <strong>don\u2019t link anywhere<\/strong>, and they show off a small handful of products. They could all just be <strong>added to the home page background<\/strong> without the slider to save confusion and extra kilobytes of JavaScript.<\/p>\n<p>I\u2019d argue this background sliding feature doesn\u2019t add much value to an already-cramped website. If the images had links or accompanying text they\u2019d at least be more relevant.<\/p>\n<p>Feel free to use images in your header section that take up the full page, however if they <strong>don\u2019t link anywhere or offer any genuine information<\/strong> then don\u2019t turn them into a carousel.<\/p>\n<h2>Interactive features<\/h2>\n<p>The way users navigate a carousel affects the design itself. There are a <strong>variety of navigation styles<\/strong>, but these are the most popular:<\/p>\n<ul>\n<li>Dot-based navigation<\/li>\n<li>Arrow navigation<\/li>\n<li>Thumbnail navigation<\/li>\n<li>List links or headline items<\/li>\n<\/ul>\n<p>The most common is the <strong>dot navigation<\/strong> which you\u2019ll find on hundreds of modern websites.<\/p>\n<h3>Example 1: Chic at Home \u2013 home page<\/h3>\n<p>Chic at Home is a great example using <strong>three tiny dots beneath the slider<\/strong> to denote navigation. Each image rotates through automatically, and the related dot in the series <strong>gets filled with black<\/strong>. The other two empty dots <strong>denote potential slides<\/strong> for users to browse.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/06-chic-at-home-dot-navigation-carousel.jpg\" alt=\"Chic at Home Carousel\" width=\"800\" height=\"752\"><\/figure>\n<p>This is a <strong><a href=\"https:\/\/tympanus.net\/codrops\/2014\/01\/21\/dot-navigation-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">popular design pattern<\/a><\/strong> that many users already recognize. It falls into the same category as the <a href=\"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/\">hamburger menu<\/a> that many designers do not like, but <strong>users already recognize it<\/strong>, and instinctively know how to use it.<\/p>\n<h3>Example 2: Pure Cycles \u2013 home page<\/h3>\n<p>The home page of <a href=\"https:\/\/www.purecycles.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pure Cycles<\/a> uses a <strong>combination of dot and arrow navigation<\/strong>. This way users have the forward&back navigation, but <strong>also see the \u201coverall\u201d navigation<\/strong> through dot links in the bottom.<\/p>\n<figure><a href=\"https:\/\/www.purecycles.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/07-pure-cycles-homepage-carousel.jpg\" alt=\"Pure Cycles Carousel Design\" width=\"800\" height=\"387\"><\/a><\/figure>\n<p>I actually find the dot links in this example tough to see. The difficulty with visual slides is that many elements aren\u2019t easy to distinguish, so arrows and dots can <strong>easily blend into the background<\/strong>.<\/p>\n<h3>Example 3: IGN \u2013 home page<\/h3>\n<p>On the homepage of <a href=\"https:\/\/www.ign.com\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">IGN<\/a> you\u2019ll find another <strong>auto-rotating carousel<\/strong> that uses <strong>title links for the navigation<\/strong>. This is very common for publishers who want to <strong>sell headlines<\/strong> rather than products. Each link goes to the individual slide that eventually <strong>leads to the article page<\/strong>.<\/p>\n<figure><a href=\"https:\/\/www.ign.com\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/08-ign-homepage-carousel-slider.jpg\" alt=\"IGN Carousel Home Page\" width=\"800\" height=\"440\"><\/a><\/figure>\n<p>These links <strong>could be replaced with thumbnails<\/strong>, or even include thumbnails from each story \u2014 however the <strong>visual aspect is shown in the carousel<\/strong>, so omitting the thumbnail actually saves space.<\/p>\n<p>Different websites use different navigation styles for different reasons. <strong>Consider the goal(s) of your visitors<\/strong>, and design for the best user experience.<\/p>\n<h2>Key takeaways<\/h2>\n<p>You should aim to <strong>produce genuine value, or extra information<\/strong> with a carousel. This may be information the visitor did not have before, or it may lead to pages that the visitor may not have found otherwise.<\/p>\n<p>Try to avoid auto-rotating carousels, and <strong>only use them on major landing pages<\/strong> (the home page being one example). As long as the carousel <strong>has a purpose<\/strong>, and <strong>doesn\u2019t look like an ad<\/strong>, your design should do well.<\/p>\n<p>If you\u2019re looking for more info on web carousels, check out some of the following posts:<\/p>\n<ul>\n<li><a href=\"https:\/\/bradfrost.com\/blog\/post\/carousels\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Carousels by Brad Frost<\/a><\/li>\n<li><a href=\"https:\/\/baymard.com\/blog\/homepage-carousel\" target=\"_blank\" rel=\"noopener noreferrer\">8 UX Requirements for Designing a User-Friendly Homepage Carousel<\/a><\/li>\n<li><a href=\"https:\/\/www.nngroup.com\/articles\/designing-effective-carousels\/\" target=\"_blank\" rel=\"noopener noreferrer\">Carousel Usability: Designing an Effective UI for Websites with Content Overload<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>There\u2019s no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but grow in the past 5-10 years with more browser support now than ever before. But are image carousels really worth the effort? What sorts of benefits do they produce, and how should they be used productively in&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4642],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Image Carousels in Web Design &mdash; Benefits &amp; Best Practices - Hongkiat<\/title>\n<meta name=\"description\" content=\"There&#039;s no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but grow in the past 5-10 years with more browser\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices\" \/>\n<meta property=\"og:description\" content=\"There&#039;s no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but grow in the past 5-10 years with more browser\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-14T13:01:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-14T10:11:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/01-au-lit-fine-linens.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices\",\"datePublished\":\"2018-11-14T13:01:09+00:00\",\"dateModified\":\"2022-10-14T10:11:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/\"},\"wordCount\":1572,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-carousels-tips\\\/01-au-lit-fine-linens.jpg\",\"keywords\":[\"Gallery and Slideshow\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/\",\"name\":\"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-carousels-tips\\\/01-au-lit-fine-linens.jpg\",\"datePublished\":\"2018-11-14T13:01:09+00:00\",\"dateModified\":\"2022-10-14T10:11:51+00:00\",\"description\":\"There's no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but grow in the past 5-10 years with more browser\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-carousels-tips\\\/01-au-lit-fine-linens.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-carousels-tips\\\/01-au-lit-fine-linens.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-carousels-tips\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices - Hongkiat","description":"There's no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but grow in the past 5-10 years with more browser","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/","og_locale":"en_US","og_type":"article","og_title":"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices","og_description":"There's no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but grow in the past 5-10 years with more browser","og_url":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-11-14T13:01:09+00:00","article_modified_time":"2022-10-14T10:11:51+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/01-au-lit-fine-linens.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices","datePublished":"2018-11-14T13:01:09+00:00","dateModified":"2022-10-14T10:11:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/"},"wordCount":1572,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/01-au-lit-fine-linens.jpg","keywords":["Gallery and Slideshow"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/","url":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/","name":"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/01-au-lit-fine-linens.jpg","datePublished":"2018-11-14T13:01:09+00:00","dateModified":"2022-10-14T10:11:51+00:00","description":"There's no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but grow in the past 5-10 years with more browser","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/01-au-lit-fine-linens.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/image-carousels-tips\/01-au-lit-fine-linens.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/image-carousels-tips\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Image Carousels in Web Design &mdash; Benefits &amp; Best Practices"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7p8","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28466"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28466\/revisions"}],"predecessor-version":[{"id":62790,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28466\/revisions\/62790"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28466"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}