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

5 Item Carousel Sample

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

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

	<!-- 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>
		<label for="carousel-start-3"></label>
		<label for="carousel-start-4"></label>
		<label for="carousel-start-5"></label>
	</div>
	<div class="pcf-carousel-anime-dots">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<!-- 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('http://www.dream-wallpaper.com/free-wallpaper/nature-wallpaper/rainbow-scenery-wallpaper/1920x1200/free-wallpaper-1.jpg');"></div>
		<div class="pcf-carousel-item" style="background-image:url('http://hdfreewallpaper.net/wp-content/uploads/2015/10/Beautiful-Scenery-of-Winter-Season-free-hd-wallpapers.jpg');"></div>
		<div class="pcf-carousel-item" style="background-image:url('http://thewowstyle.com/wp-content/uploads/2015/01/Free-Wallpaper-Nature-Scenes.jpg');"></div>
		<div class="pcf-carousel-item" style="background-image:url('https://static.pexels.com/photos/371633/pexels-photo-371633.jpeg');"></div>
	</div>

</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.