1. Design System
  2. Components
  3. Carousels

Carousels

Carousels are used to display a collection of images allowing the user to browse through the list of items in a circular fashion. This is useful when there is not enough space to show all items at once.

Basic carousel

<div class="accommodation-desktop-content">
	<div class="accommodation-desktop-carousel-container">
		<div class="js-carousel js-accommodation-desktop-slider js-loop">
			<div class="accommodation-carousel-item">
				<div class="accommodation-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/be74a27b-32d8-44a1-97af-9a14f8140c39/Crescent-Hall-Interior.jpg?width=600&amp;height=325&amp;ext=.jpg')"></div>
				<div class="accommodation-carousel-item-label">
					<p class="is-size-4 has-text-weight-bold">Headington Campus</p>
					<div class="columns">
						<div class="column is-half">
							<p>Crescent Hall</p>
							<p> <a class="has-text-weight-bold has-text-white" href="#"><span>More about this hall</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </p>
						</div>
						<div class="column is-half">
							<p class="is-pulled-right">Shared bathroom;  &#163;114 per week / &#163;4,332 per year</p>
						</div>
					</div>
				</div>
			</div>
			<div class="accommodation-carousel-item">
				<div class="accommodation-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/7539dbbb-b791-42a1-87a3-b51116c128ac/Crescent-Hall-Exterior.jpg?width=600&amp;height=325&amp;ext=.jpg')"></div>
				<div class="accommodation-carousel-item-label">
					<p class="is-size-4 has-text-weight-bold">Headington Campus</p>
					<div class="columns">
						<div class="column is-half">
							<p>Crescent Hall</p>
							<p> <a class="has-text-weight-bold has-text-white" href="#"><span>More about this hall</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </p>
						</div>
						<div class="column is-half">
							<p class="is-pulled-right">Shared bathroom;  &#163;114 per week / &#163;4,332 per year</p>
						</div>
					</div>
				</div>
			</div>
			<div class="accommodation-carousel-item">
				<div class="accommodation-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/bd980fcd-bd50-4d24-b20f-5696576ad4a1/Lady-Spencer-Churchill-Hall-Interior.jpg?width=600&amp;height=325&amp;ext=.jpg')"></div>
				<div class="accommodation-carousel-item-label">
					<p class="is-size-4 has-text-weight-bold">Wheatley Campus</p>
					<div class="columns">
						<div class="column is-half">
							<p>Lady Spencer Churchill Hall</p>
							<p> <a class="has-text-weight-bold has-text-white" href="#"><span>More about this hall</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </p>
						</div>
						<div class="column is-half">
							<p class="is-pulled-right">Shared bathroom;  &#163;160.50 per week / &#163;6,099 per year</p>
						</div>
					</div>
				</div>
			</div>
			<div class="accommodation-carousel-item">
				<div class="accommodation-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/549e0b94-24b1-4fe8-a6c2-8b9cd4c6ca5c/Lady-Spencer-Churchill-Hall-Exterior.jpg?width=600&amp;height=325&amp;ext=.jpg')"></div>
				<div class="accommodation-carousel-item-label">
					<p class="is-size-4 has-text-weight-bold">Wheatley Campus</p>
					<div class="columns">
						<div class="column is-half">
							<p>Lady Spencer Churchill Hall</p>
							<p> <a class="has-text-weight-bold has-text-white" href="#"><span>More about this hall</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </p>
						</div>
						<div class="column is-half">
							<p class="is-pulled-right">Shared bathroom;  &#163;160.50 per week / &#163;6,099 per year</p>
						</div>
					</div>
				</div>
			</div>
			<div class="accommodation-carousel-item">
				<div class="accommodation-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/4a69efda-3d90-4e05-8a0d-e212d7ded85e/The-Mews-Interior.jpg?width=600&amp;height=325&amp;ext=.jpg')"></div>
				<div class="accommodation-carousel-item-label">
					<p class="is-size-4 has-text-weight-bold">Headington Campus</p>
					<div class="columns">
						<div class="column is-half">
							<p>The Mews</p>
							<p> <a class="has-text-weight-bold has-text-white" href="#"><span>More about this hall</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </p>
						</div>
						<div class="column is-half">
							<p class="is-pulled-right">En suite;  &#163;185.50 per week / &#163;7,791 per year</p>
						</div>
					</div>
				</div>
			</div>
			<div class="accommodation-carousel-item">
				<div class="accommodation-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/3c425e6f-9279-4808-8fb2-2a1070a99f53/Westminster-Hall-Interior.jpg?width=600&amp;height=325&amp;ext=.jpg')"></div>
				<div class="accommodation-carousel-item-label">
					<p class="is-size-4 has-text-weight-bold">Harcourt Hill Campus</p>
					<div class="columns">
						<div class="column is-half">
							<p>Westminster Hall</p>
							<p> <a class="has-text-weight-bold has-text-white" href="#"><span>More about this hall</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </p>
						</div>
						<div class="column is-half">
							<p class="is-pulled-right">En suite;  &#163;165.60 per week / &#163;6,292.80 per year</p>
						</div>
					</div>
				</div>
			</div>
			<div class="accommodation-carousel-item">
				<div class="accommodation-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/41dc1595-c745-4c3b-8358-ea36ba7c412f/Westminster-Hall-Exterior.jpg?width=600&amp;height=325&amp;ext=.jpg')"></div>
				<div class="accommodation-carousel-item-label">
					<p class="is-size-4 has-text-weight-bold">Harcourt Hill Campus</p>
					<div class="columns">
						<div class="column is-half">
							<p>Westminster Hall</p>
							<p> <a class="has-text-weight-bold has-text-white" href="#"><span>More about this hall</span><span class="icon"><i class="fas fa-arrow-right"></i></span></a> </p>
						</div>
						<div class="column is-half">
							<p class="is-pulled-right">En suite;  &#163;165.60 per week / &#163;6,292.80 per year</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="js-accommodation-desktop-slider-controls">
			<div class="accommodation-desktop-carousel-control control-left has-text-primary is-size-2">
				<i class="fas fa-chevron-left fa-lg" aria-hidden="true"></i>
			</div>
			<div class="accommodation-desktop-carousel-control control-right has-text-primary is-size-2">
				<i class="fas fa-chevron-right fa-lg" aria-hidden="true"></i>
			</div>
		</div>
	</div>
</div>

2 up carousel

<section class="student-profiles-container m-bottom-40">
	<div class="container is-fullhd">
		<div class='student-profiles-content'>
			<div class='student-profiles-carousel-container'>
				<div class='js-carousel js-student-profiles-slider js-two-panels-responsive js-loop'>
					<div class="student-profiles-carousel-item">
						<div class="student-profiles-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/dd1384fe-609c-45c4-9731-e086fc2d71d1/students_istudies_mMogstad.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
						<div class="student-profiles-carousel-item-label">
							<p class="is-size-4 has-text-weight-bold">Martin Wik&#246;ren Mogstad</p>
							<p class="student-profile-quote font-type-2">"I can say that the best things about the course are the lecturers, the seminars and of course the students you study with"</p>
							<a class="student-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/social-sciences/staff-and-students/student-profiles/?dept=ss&amp;uid=164" title="Read more about Martin Wik&#246;ren" target="_self">Read more about Martin Wik&#246;ren<span class="student-profile-quote-link-icon fa fa-arrow-right"></span></a> 
						</div>
					</div>
					<div class="student-profiles-carousel-item">
						<div class="student-profiles-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/244f9f38-4c14-4e11-873e-987b7ea27004/students_geography_aCragg.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
						<div class="student-profiles-carousel-item-label">
							<p class="is-size-4 has-text-weight-bold">Adela Cragg</p>
							<p class="student-profile-quote font-type-2">"I love Oxford as a city! There’s so much to do, from bars, restaurants, cafes, museums, sports clubs ... there’s still so much I haven’t done and I’ve been here 3 years"</p>
							<a class="student-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/social-sciences/staff-and-students/student-profiles/?dept=ss&amp;uid=201" title="Read more about Adela" target="_self">Read more about Adela<span class="student-profile-quote-link-icon fa fa-arrow-right"></span></a>
						</div>
					</div>
					<div class="student-profiles-carousel-item">
						<div class="student-profiles-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/e025b74f-4efe-41d9-9e84-68300291026e/students_brickfields_bRajendran.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
						<div class="student-profiles-carousel-item-label">
							<p class="is-size-4 has-text-weight-bold">Baviniaraj Rajendran</p>
							<p class="student-profile-quote font-type-2">"The Oxford Brookes’ Law course has given me freedom to choose which modules I would like to study in both semesters, and I am hoping that by choosing environmental law it will be a platform to assist me in my future career ventures"</p>
							<a class="student-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/school-of-law/staff-and-students/student-profiles/?dept=law&amp;uid=236" title="Read more about Baviniaraj " target="_self">Read more about Baviniaraj <span class="student-profile-quote-link-icon fa fa-arrow-right"></span></a>
						</div>
					</div>
					<div class="student-profiles-carousel-item">
						<div class="student-profiles-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/a8f4fe1d-9243-4fce-8fe1-d9dc513b9779/students_ug-elc_dWilliams.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
						<div class="student-profiles-carousel-item-label">
							<p class="is-size-4 has-text-weight-bold">Dylan Williams</p>
							<p class="student-profile-quote font-type-2">"I have had a great experience at Brookes, both as a student and as a member of staff. It has prepared me excellently for my future, and it will always be a place I hold close to my heart"</p>
							<a class="student-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/school-of-education/staff-and-students/student-profiles/?dept=edu&amp;uid=49" title="Read more about Dylan " target="_self">Read more about Dylan <span class="student-profile-quote-link-icon fa fa-arrow-right"></span></a>
						</div>
					</div>
					<div class="student-profiles-carousel-item">
						<div class="student-profiles-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/05d88330-c504-4d10-aa9a-6fbff0677704/students_history_hCooper.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
						<div class="student-profiles-carousel-item-label">
							<p class="is-size-4 has-text-weight-bold">Hannah Cooper</p>
							<p class="student-profile-quote font-type-2">"The lecturers are experts in their fields and are a research-led department, but I also fell in love with Oxford and the university as a whole when visiting on Open Day"</p>
							<a class="student-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/hpc/staff-and-students/student-profiles/?dept=hpc&amp;uid=112" title="Read more about Hannah " target="_self">Read more about Hannah <span class="student-profile-quote-link-icon fa fa-arrow-right"></span></a>
						</div>
					</div>
				</div>
				<div class="js-student-profiles-slider-controls">
					<div class="student-profiles-carousel-control control-left has-text-primary is-size-2">
						<i class="fas fa-chevron-left fa-lg" aria-hidden="true"></i>
					</div>
					<div class="student-profiles-carousel-control control-right has-text-primary is-size-2">
						<i class="fas fa-chevron-right fa-lg" aria-hidden="true"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

Overtop to mobile carousel

A block of text over the top of an image which changes to a 2 up carousel and a single carousel at mobile sizes.

<div class="is-hidden-desktop">
	<div class='staff-profiles-content'>
		<div class='staff-profiles-carousel-container'>
			<div class='js-carousel js-staff-profiles-slider js-two-panels-responsive js-loop'>
				<div class="staff-profiles-carousel-item">
					<div class="staff-profiles-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/a6dec9e6-7560-46ad-b76d-cac4b1b164a1/Anna-Nekaris.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
					<div class="staff-profiles-carousel-item-label">
						<p class="is-size-4 has-text-weight-bold">Professor  Anna  Nekaris</p>
						<p class="staff-profile-quote font-type-2">Professor Anna Nekaris is a Professor in Anthropology and Primate Conservation studying the unique group of evolutionary distinct primates known as the Asian lorises.  Her studies cover all eleven species, including six she named or elevated from subspecies.  Anna is the Course Tutor for the highly acclaimed MSc Primate Conservation, Director of the Little Fireface Project and Convenor of the Nocturnal Primate Research Group. </p>
						<a class="staff-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/templates/pages/staff.aspx?wid=&amp;op=full&amp;uid=p0029554" title="Read more about Anna" target="_self">Read more about Anna<span class="staff-profile-quote-link-icon fa fa-arrow-right"></span></a>
					</div>
				</div>
				<div class="staff-profiles-carousel-item">
					<div class="staff-profiles-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/fe47ac8b-26ff-4960-b30a-b26023c5816b/Sam-Smith-2.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
					<div class="staff-profiles-carousel-item-label">
						<p class="is-size-4 has-text-weight-bold">Dr  Sam  Smith</p>
						<p class="staff-profile-quote font-type-2">Sam is an expert in the study of chipped stone tools and his work includes typological, technological and use wear analysis of stone tool assemblages from many regions and periods.</p>
						<a class="staff-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/social-sciences/staff-and-students/academic-staff/?uid=p0076094&amp;op=full" title="Read more about Sam" target="_self">Read more about Sam<span class="staff-profile-quote-link-icon fa fa-arrow-right"></span></a>
					</div>
				</div>
				<div class="staff-profiles-carousel-item">
					<div class="staff-profiles-carousel-photo" style="background-image: url('https://www.brookes.ac.uk/getmedia/7641e9b8-b61e-49d3-b075-93f1cfd583fe/Tom-Chambers.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
					<div class="staff-profiles-carousel-item-label">
						<p class="is-size-4 has-text-weight-bold">Dr  Thomas  Chambers</p>
						<p class="staff-profile-quote font-type-2">Thomas Chambers is a Lecturer in Anthropology at Oxford Brookes University, United Kingdom. His research focuses on labour, migration, craftwork and Muslims in India.  Thomas has publications in press with Modern Asian Studies on imagination and migration in India and the Gulf and a Special Issue contribution, again with Modern Asian Studies, on urban space, marginalisation and conviviality in India. </p>
						<a class="staff-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/templates/pages/staff.aspx?wid=&amp;op=full&amp;uid=p0085161" title="Read more about Thomas" target="_self">Read more about Thomas<span class="staff-profile-quote-link-icon fa fa-arrow-right"></span></a>
					</div>
				</div>
			</div>
			<div class="js-staff-profiles-slider-controls">
				<div class="staff-profiles-carousel-control control-left has-text-primary is-size-2">
					<i class="fas fa-chevron-left fa-lg" aria-hidden="true"></i>
				</div>
				<div class="staff-profiles-carousel-control control-right has-text-primary is-size-2">
					<i class="fas fa-chevron-right fa-lg" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</div>
</div>
<section class="section course-section is-hidden-touch p-top-0">
	<div class="staff-profiles container is-fullhd">
		<div class="columns staff-profile-row">
			<div class="staff-profile-photo column is-half" style="background-image: url('https://www.brookes.ac.uk/getmedia/a6dec9e6-7560-46ad-b76d-cac4b1b164a1/Anna-Nekaris.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
			<div class="staff-profile-quote-container column is-half">
				<div class="staff-profile-quote-block staff-profile-quote-right">
					<h3 class="is-size-4 has-text-weight-bold">Professor  Anna  Nekaris</h3>
					<p class="staff-profile-quote font-type-2 is-italic">Professor Anna Nekaris is a Professor in Anthropology and Primate Conservation studying the unique group of evolutionary distinct primates known as the Asian lorises.  Her studies cover all eleven species, including six she named or elevated from subspecies.  Anna is the Course Tutor for the highly acclaimed MSc Primate Conservation, Director of the Little Fireface Project and Convenor of the Nocturnal Primate Research Group. </p>
					<a class="staff-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/templates/pages/staff.aspx?wid=&amp;op=full&amp;uid=p0029554" title="Read more about Anna" target="_self">Read more about Anna<span class="staff-profile-quote-link-icon fa fa-arrow-right"></span></a>
				</div>
			</div>
		</div>
		<div class="columns staff-profile-row">
			<div class="staff-profile-quote-container column is-half">
				<div class="staff-profile-quote-block staff-profile-quote-left">
					<h3 class="is-size-4 has-text-weight-bold">Dr  Sam  Smith</h3>
					<p class="staff-profile-quote font-type-2 is-italic">Sam is an expert in the study of chipped stone tools and his work includes typological, technological and use wear analysis of stone tool assemblages from many regions and periods.</p>
					<a class="staff-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/social-sciences/staff-and-students/academic-staff/?uid=p0076094&amp;op=full" title="Read more about Sam" target="_self">Read more about Sam<span class="staff-profile-quote-link-icon fa fa-arrow-right"></span></a>
				</div>
			</div>
			<div class="staff-profile-photo column is-half" style="background-image: url('https://www.brookes.ac.uk/getmedia/fe47ac8b-26ff-4960-b30a-b26023c5816b/Sam-Smith-2.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
		</div>
		<div class="columns staff-profile-row">
			<div class="staff-profile-photo column is-half" style="background-image: url('https://www.brookes.ac.uk/getmedia/7641e9b8-b61e-49d3-b075-93f1cfd583fe/Tom-Chambers.jpg?width=800&amp;height=450&amp;ext=.jpg')"></div>
			<div class="staff-profile-quote-container column is-half">
				<div class="staff-profile-quote-block staff-profile-quote-right">
					<h3 class="is-size-4 has-text-weight-bold">Dr  Thomas  Chambers</h3>
					<p class="staff-profile-quote font-type-2 is-italic">Thomas Chambers is a Lecturer in Anthropology at Oxford Brookes University, United Kingdom. His research focuses on labour, migration, craftwork and Muslims in India.  Thomas has publications in press with Modern Asian Studies on imagination and migration in India and the Gulf and a Special Issue contribution, again with Modern Asian Studies, on urban space, marginalisation and conviviality in India. </p>
					<a class="staff-profile-quote-link has-text-weight-bold" href="https://www.brookes.ac.uk/templates/pages/staff.aspx?wid=&amp;op=full&amp;uid=p0085161" title="Read more about Thomas" target="_self">Read more about Thomas<span class="staff-profile-quote-link-icon fa fa-arrow-right"></span></a> 
				</div>
			</div>
		</div>
	</div>
</section>

Related courses carousel

<section class="section course-section p-bottom-0">
	<div class="container is-fullhd">
		<div class='related-course-content'>
			<div class='related-course-carousel-container'>
				<div class='js-carousel js-related-course-slider js-two-panels-responsive '> 
					<a href="https://www.brookes.ac.uk/courses/undergraduate/biological-anthropology">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/8730d7eb-cd4b-4f3c-af5f-158c8e24828d/Biological-Anthropology-2.jpg?width=930&amp;height=349&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Biological Anthropology</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/geography">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/4aedce1a-9510-4659-bfb8-2c8366919f6f/Geography-bsc.jpg?width=930&amp;height=349&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Geography</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/social-anthropology">
						<div class="course-related-course has-text-centered" style="background-image: url('https://oxb-prd-cdn-01.azureedge.net/mediacontainer/medialibraries/oxfordbrookes/images/courses/undergraduate/faculty of humanities and social sciences/course banners/social-anthropology.jpg?ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Social Anthropology</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/communication-media-and-culture">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/7223ae5d-b97e-4508-810a-f478e360f0cd/Communication-Media-and-Culture.jpg?width=930&amp;height=349&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Communication, Media and Culture</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/anthropology-and-communication-media-and-cultu">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/a57e73d9-cf0d-4dc0-887a-c279fc3347cc/communication-media-and-culture.jpg?width=930&amp;height=308&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Anthropology and Communication, Media and Culture</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/anthropology-and-english-literature">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/6102deb1-b5dc-4dbc-ae66-fcc3581334f5/anthropology.jpg?width=930&amp;height=308&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Anthropology and English Literature</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/anthropology-and-geography">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/797426b9-8a28-4556-a9db-655a782bd9bf/geography.jpg?width=930&amp;height=308&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Anthropology and Geography</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/anthropology-and-history">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/e1bfd8a5-23db-434e-95cb-fe4859e4b5a2/history.jpg?width=930&amp;height=308&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Anthropology and History</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/anthropology-and-history-of-art">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/4a590435-2f1e-4f37-bea0-e6088ae60f46/history-of-art.jpg?width=930&amp;height=308&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Anthropology and History of Art</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/anthropology-and-international-relations">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/6102deb1-b5dc-4dbc-ae66-fcc3581334f5/anthropology.jpg?width=930&amp;height=308&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Anthropology and International Relations</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/anthropology-and-philosophy">
						<div class="course-related-course has-text-centered" style="background-image: url('')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Anthropology and Philosophy</div>
									</div>
								</div>
							</div>
						</div>
					</a>
					<a href="https://www.brookes.ac.uk/courses/undergraduate/anthropology-and-sociology">
						<div class="course-related-course has-text-centered" style="background-image: url('https://www.brookes.ac.uk/getmedia/c12aff51-cd22-4cbf-8288-536ba3305794/sociology.jpg?width=930&amp;height=308&amp;ext=.jpg')">
							<div class="course-related-course-background-overlay">
								<div class="is-table">
									<div class="is-table-cell">
										<div>Related course</div>
										<div class="is-size-2 is-size-3-mobile font-type-2">Anthropology and Sociology</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="js-related-course-slider-controls">
					<div class="related-course-carousel-control control-left has-text-primary is-size-2">
						<i class="fas fa-chevron-left fa-lg" aria-hidden="true"></i>
					</div>
					<div class="related-course-carousel-control control-right has-text-primary is-size-2">
						<i class="fas fa-chevron-right fa-lg" aria-hidden="true"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

Accessibility

Carousels pose many accessibility issues for screen reader and keyboard users. They also cause usability and content issues for all users.

If you do decide to implement a carousel, we recommend that they should not be set to rotate or change automatically.