Content slider (carousel)

An unordered list of slides which, when enhanced with JavaScript, acts as a content slider. It is used specifically for sharing quotations from W3C members as part of the business ecosystem template.

¶Markup for a single slide

Open this A single carousel slide in a new tab

HTML:

<figure class="slide">
	<blockquote class="slide__quote">
		<p>The School of Informatics at the University of Edinburgh is a world leader in research and teaching in Computer Science, Artificial Intelligence and Cognitive Science.</p>
		<p>W3C technologies are both used and studied here, and we are proud to contribute to their development.</p>
	</blockquote>
	<figcaption class="slide__cite l-sidebar">
		<div>
			<div class="sidebar">
				<div class="slide__logo">
					<img src="/dist/assets/images/edinburgh-uni.png" alt="The University of Edinburgh" loading="lazy" />
				</div>
			</div>
			<div class="not-sidebar">
				<p>Dierdre De Veloper</p>
				<p>Lead Dev</p>
			</div>
		</div>
	</figcaption>
</figure>

¶Markup for the content slider

Open this A complete carousel in a new tab

HTML:

<div class="component component--slider u-full-width" data-component="slider">
	<div class="l-center">
		<h2 id="slider-title">What organizations think about us</h2>
		<section aria-labelledby="slider-title">
			<ul class="clean-list" role="presentation">
				<li>
					<figure class="slide">
						<blockquote class="slide__quote">
							<p>The School of Informatics at the University of Edinburgh is a world leader in research and teaching in Computer Science, Artificial Intelligence and Cognitive Science.</p>
							<p>W3C technologies are both used and studied here, and we are proud to contribute to their development.</p>
						</blockquote>
						<figcaption class="slide__cite l-sidebar">
							<div>
								<div class="sidebar">
									<div class="slide__logo">
										<img src="/dist/assets/images/edinburgh-uni.png" alt="The University of Edinburgh" loading="lazy" />
									</div>
								</div>
								<div class="not-sidebar">
									<p>Dierdre De Veloper</p>
									<p>Lead Dev</p>
								</div>
							</div>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure class="slide">
						<blockquote class="slide__quote">
							<p>Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, a search engine, cloud computing, software, and hardware.</p>
						</blockquote>
						<figcaption class="slide__cite l-sidebar">
							<div>
								<div class="sidebar">
									<div class="slide__logo">
										<img src="/dist/assets/images/google.png" alt="Google" loading="lazy" />
									</div>
								</div>
								<div class="not-sidebar">
									<p>Ann Other-Developer</p>
									<p>Lead Dev</p>
								</div>
							</div>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure class="slide">
						<blockquote class="slide__quote">
							<p>Amazon.com, Inc. is an American multinational technology company based in Seattle, Washington, which focuses on e-commerce, cloud computing, digital streaming, and artificial intelligence.</p>
						</blockquote>
						<figcaption class="slide__cite l-sidebar">
							<div>
								<div class="sidebar">
									<div class="slide__logo">
										<img src="/dist/assets/images/amazon.png" alt="Amazon" loading="lazy" />
									</div>
								</div>
								<div class="not-sidebar">
									<p>Joe Bloggs</p>
									<p>Lead Dev</p>
								</div>
							</div>
						</figcaption>
					</figure>
				</li>
			</ul>
		</section>
	</div>
</div>

<script type="text/javascript" src="/dist/assets/js/slider.js"></script>

¶Considerations

Carousels are highly interactive components, requiring a solid, semantic HTML base, and considered use of JavaScript and ARIA to make them accessible. The patterns above were tested in 2021 by the Digital Accessibility Centre

In the preceding example, the script to make the carousel work has been added directly after the HTML. When using it on a project, it's best to add the following script before the closing body tag (</body>) instead:

<script>
	if (document.documentElement.classList.contains('js')) {

		let sliderScript = document.createElement('script');
		sliderScript.src = '/assets/js/slider.js';
		document.querySelector('body').appendChild(sliderScript);

	}
</script>

An example using this technique to include the script can be found in the business ecosystem template.