{"id":612,"date":"2025-11-04T14:11:05","date_gmt":"2025-11-04T19:11:05","guid":{"rendered":"https:\/\/www.clarku.edu\/wordpress\/?page_id=612"},"modified":"2025-11-04T14:17:39","modified_gmt":"2025-11-04T19:17:39","slug":"carousels","status":"publish","type":"page","link":"https:\/\/www.clarku.edu\/wordpress\/components\/carousels\/","title":{"rendered":"Carousels"},"content":{"rendered":"\n<p class=\"is-style-intro\">Carousels present information in small, easy-to-consume sections that a visitor scrolls through horizontally. <\/p>\n\n\n\n<p>Because they consume less space vertically on the page, they make for an effective &#8220;branch&#8221; of the page where an interested reader can access additional related information, and less interested readers can skip past. Photo galleries make for great carousels, but they can also be used to communicate other ideas.<\/p>\n\n\n\n<p>Carousels work well in the middle or toward the end of a page. Never use a carousel at the top of a page or as a hero. Research indicates that visitors don&#8217;t engage with carousels until you&#8217;ve captured their interest.<\/p>\n\n\n<section class=\"splide cu_carousel\" id=\"cu_carousel_0\" aria-label=\"Basic Structure Example\">\n    <div class=\"splide__track\">\n        <div class=\"splide__list\">\n            \n\n<div class=\"wp-block-clarku-slide splide__slide\">\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq-1024x1024.png\" alt=\"an illustration of a landing page\" class=\"wp-image-113 size-full\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq-1024x1024.png 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq-300x300.png 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq-150x150.png 150w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq-768x768.png 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq.png 1260w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Landing pages inspire visitors to take action: connect with Clark, or click to explore more deeply.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-clarku-slide splide__slide\">\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/detail-page-wireframe-sq-1024x1024.png\" alt=\"an illustration of a typical detail page\" class=\"wp-image-102 size-full\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/detail-page-wireframe-sq-1024x1024.png 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/detail-page-wireframe-sq-300x300.png 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/detail-page-wireframe-sq-150x150.png 150w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/detail-page-wireframe-sq-768x768.png 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/detail-page-wireframe-sq.png 1260w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Detail pages explain a single idea thoroughly to inform visitors about a procedure, opportunity or other idea.<\/p>\n<\/div><\/div>\n<\/div>\n\n        <\/div>\n    <\/div>\n<\/section>\n<script>\n    let cu_carousel_0 = new Splide( '#cu_carousel_0',{\n        type   : 'loop',\n        perPage: 1,\n        perMove: 1,\n        focus  : 'center',\n        pagination:false,\n        updateOnMove: true,\n        gap:'2.5rem',\n        breakpoints: {\n            768: {\n                perPage: 1,\n                arrows: true,\n                pagination: false            },\n            1279: {\n                perPage: Math.min(2, 1) ,\n                arrows: true,\n                pagination: false            },\n        }\n    } );\n    cu_carousel_0.on( 'mounted', function () {\n        cu_carousel_0.Components.Slides.forEach(component => {\n\t\t\tcomponent.slide.style.alignSelf = 'flex-start'\n\t\t})\n    } );\n    cu_carousel_0.mount();\n<\/script>\n\n\n\n<aside class=\"wp-block-group boxout has-light-warm-gray-background-color has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\"><div style=\"color:inherit\" class=\"eyebrow  has-text-align-left\">Tip<\/div>\n\n\n\n<p>You can use a <em>gallery<\/em> block as a carousel. To make it work, create a standard gallery, then set the number of columns to&nbsp;1.<\/p>\n<\/aside>\n\n\n<?xml encoding=\"utf-8\" ?><div data-splide='{\"type\":\"slide\",\"perPage\":1}' aria-label=\"Slideshow\" id=\"s0-57890500-1776174568\" class=\"has-nested-images columns-1 is-cropped is-layout-flex splide jonas-splide jonas-gallery\"><div class=\"splide__track\"><ul class=\"splide__list\"><li class=\"splide__slide\"><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1166\" data-id=\"363\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jonas-clark-hall.jpg\" alt=\"Jonas Clark Hall detail photo with dramatic light\" class=\"wp-image-363\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jonas-clark-hall.jpg 2400w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jonas-clark-hall-300x146.jpg 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jonas-clark-hall-1024x497.jpg 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jonas-clark-hall-768x373.jpg 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jonas-clark-hall-1536x746.jpg 1536w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jonas-clark-hall-2048x995.jpg 2048w\" sizes=\"auto, (max-width: 2400px) 100vw, 2400px\" \/><\/figure><\/li><li class=\"splide__slide\"><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1707\" data-id=\"59\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/fall-foliage.jpg\" alt=\"students walking through autumn leaves\" class=\"wp-image-59\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/fall-foliage.jpg 2560w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/fall-foliage-300x200.jpg 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/fall-foliage-1024x683.jpg 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/fall-foliage-768x512.jpg 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/fall-foliage-1536x1024.jpg 1536w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/fall-foliage-2048x1366.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure><\/li><li class=\"splide__slide\"><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1333\" data-id=\"409\" src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab.jpg\" alt=\"a researcher studies plant roots\" class=\"wp-image-409\" srcset=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab.jpg 2000w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-300x200.jpg 300w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-1024x682.jpg 1024w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-768x512.jpg 768w, https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab-1536x1024.jpg 1536w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/figure><\/li><\/ul><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Carousels present information in small, easy-to-consume sections that a visitor scrolls through horizontally. Because they consume less space vertically on the page, they make for an effective &#8220;branch&#8221; of the page where an interested reader can access additional related information, and less interested readers can skip past. Photo galleries make for great carousels, but they [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":13,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-612","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Carousels - ClarkU WordPress<\/title>\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.clarku.edu\/wordpress\/components\/carousels\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carousels\" \/>\n<meta property=\"og:description\" content=\"Carousels present information in small, easy-to-consume sections that a visitor scrolls through horizontally. Because they consume less space vertically on the page, they make for an effective &#8220;branch&#8221; of the page where an interested reader can access additional related information, and less interested readers can skip past. Photo galleries make for great carousels, but they [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clarku.edu\/wordpress\/components\/carousels\/\" \/>\n<meta property=\"og:site_name\" content=\"ClarkU WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-04T19:17:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1260\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/carousels\\\/\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/carousels\\\/\",\"name\":\"Carousels - ClarkU WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/carousels\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/carousels\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-content\\\/uploads\\\/sites\\\/32\\\/landing-page-wireframe-sq-1024x1024.png\",\"datePublished\":\"2025-11-04T19:11:05+00:00\",\"dateModified\":\"2025-11-04T19:17:39+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/carousels\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/carousels\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-content\\\/uploads\\\/sites\\\/32\\\/landing-page-wireframe-sq.png\",\"contentUrl\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-content\\\/uploads\\\/sites\\\/32\\\/landing-page-wireframe-sq.png\",\"width\":1260,\"height\":1260,\"caption\":\"an illustration of a landing page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-json\\\/wp\\\/v2\\\/pages\\\/612#breadcrumbs\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":0,\"name\":\"ClarkU\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/\"},{\"@type\":\"ListItem\",\"position\":1,\"name\":\"ClarkU WordPress\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/\",\"name\":\"ClarkU WordPress\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Carousels - ClarkU WordPress","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.clarku.edu\/wordpress\/components\/carousels\/","og_locale":"en_US","og_type":"article","og_title":"Carousels","og_description":"Carousels present information in small, easy-to-consume sections that a visitor scrolls through horizontally. Because they consume less space vertically on the page, they make for an effective &#8220;branch&#8221; of the page where an interested reader can access additional related information, and less interested readers can skip past. Photo galleries make for great carousels, but they [&hellip;]","og_url":"https:\/\/www.clarku.edu\/wordpress\/components\/carousels\/","og_site_name":"ClarkU WordPress","article_modified_time":"2025-11-04T19:17:39+00:00","og_image":[{"width":1260,"height":1260,"url":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq.png","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.clarku.edu\/wordpress\/components\/carousels\/","url":"https:\/\/www.clarku.edu\/wordpress\/components\/carousels\/","name":"Carousels - ClarkU WordPress","isPartOf":{"@id":"https:\/\/www.clarku.edu\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clarku.edu\/wordpress\/components\/carousels\/#primaryimage"},"image":{"@id":"https:\/\/www.clarku.edu\/wordpress\/components\/carousels\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq-1024x1024.png","datePublished":"2025-11-04T19:11:05+00:00","dateModified":"2025-11-04T19:17:39+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clarku.edu\/wordpress\/components\/carousels\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.clarku.edu\/wordpress\/components\/carousels\/#primaryimage","url":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq.png","contentUrl":"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/landing-page-wireframe-sq.png","width":1260,"height":1260,"caption":"an illustration of a landing page"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/612#breadcrumbs","itemListElement":[{"@type":"ListItem","position":0,"name":"ClarkU","item":"https:\/\/www.clarku.edu\/"},{"@type":"ListItem","position":1,"name":"ClarkU WordPress","item":"https:\/\/www.clarku.edu\/wordpress"}]},{"@type":"WebSite","@id":"https:\/\/www.clarku.edu\/wordpress\/#website","url":"https:\/\/www.clarku.edu\/wordpress\/","name":"ClarkU WordPress","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clarku.edu\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=612"}],"version-history":[{"count":5,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/612\/revisions"}],"predecessor-version":[{"id":618,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/612\/revisions\/618"}],"up":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/13"}],"wp:attachment":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}