PCF Carousel animated pure CSS carousel

Carousel Features

  • No JavaScript

  • Responsive

  • Slide item amounts 2-5 (more soon)

  • Supports HTML inside each slide

  • Hover to pause animation

  • Click slide buttons to jump and pause

  • Click play button to restart animation

  • Unlimited animation cycle

Download Carousel CSS Code

Standalone Component

This is a standalone and does not require the Framework CSS. You can download the CSS code on this page or the getting started page.
Download PCF Carousel  |  1.86KB zipped | 12.9KB unminified

2 Item Carousel Sample

Example Code
<div class="pcf-carousel items-2">

	<!-- Hidden radio control inputs -->
	<input type="radio" id="carousel-play" 	  name="pcf-carousel-3" checked>
	<input type="radio" id="carousel-start-1" name="pcf-carousel-3">
	<input type="radio" id="carousel-start-2" name="pcf-carousel-3">

	<!-- Pause/play button -->
	<label for="carousel-play" class="btn-play" title="Play"></label>

	<!-- Slide jump dots -->
	<div class="pcf-carousel-dots">
		<label for="carousel-start-1"></label>
		<label for="carousel-start-2"></label>
	<div class="pcf-carousel-anime-dots">

	<!-- Slides, repeat 1st and last slide -->
	<div class="moving-strip">
		<div class="pcf-carousel-item" style="background-image:url('https://static.pexels.com/photos/371633/pexels-photo-371633.jpeg');"></div>
		<div class="pcf-carousel-item" style="background-image:url('https://wallpapercave.com/wp/ZxV8qRo.jpg');"></div>
		<div class="pcf-carousel-item" style="background-image:url('https://static.pexels.com/photos/371633/pexels-photo-371633.jpeg');"></div>

Carousel HTML Notes
Carousel Height Default height is set at 400px and goes down to 200px in smaller resolutions.
Edit .pcf-carousel height style to change.
Amount of Items Must put item class amount here <div class="pcf-carousel items-5">.
Available item classes .items-2, .items-3, .items-4,.items-5
Radio Inputs HTML radio buttons much match items amounts along with class naming.
Carousel dots are created with DIV tags inside the class .pcf-carousel-anime-dots , DIV tags must must match amout of slides.
Repeat First Item Last slide item image/DIV .pcf-carousel-item must match the first item to create a seamless animation.