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 unminified5 Item Carousel Sample
<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.
|