Website Carousel Design

A web carousel allows you to display content on your website in beautiful ways, such as images or products. Carousel is a web-based feature that most websites use.

Image galleries are a great way to save web space and present your information in a modern, beautiful way to your visitors. Image galleries and slideshows are great for displaying your portfolio or products on e-Commerce websites.

We have compiled the top website carousels for your inspiration in this article.

These sliders are most likely from Codepen. This means that you can copy and paste the HTML code to set them up as per the documentation.

Website Carousel Designs

Pure CSS Netflix Video Carousel

Code: CSS only

DEMO

Multiple Items Per Slide In Bootstrap Carousel

Code: CSS, JS (jQuery)

DEMO

CodePen Home FlexBox Exercise #3 – Image Carousel

Code: CSS, JS (jQuery)

DEMO

Carousel Text Animation

Code: CSS, JS (jQuery)

DEMO

Bootstrap 3 Carousel With Swipe

Code: Bootstrap CSS, Bootstrap JS, TouchSwipe JS

DEMO

Simple Carousel Pure CSS

Code: CSS only

DEMO

Owl Carousel – Full Width/Height

Code: CSS, JS (jQuery), Owl carousel

DEMO

Split 3D Carousel

Code: CSS, JS (jQuery), Babel JS

DEMO

Bootstrap Slider Full Screen With Animations

Code: Animate CSS, JS (jQuery), Bootstrap JS

DEMO

Website Header With Bootstrap Carousel

Code: CSS, JS (jQuery), Bootstrap JS

DEMO

Full Screen Carousel Expose

Code: CSS, JS (jQuery)

DEMO

Bootstrap Carousel FadeIn & Fadeout

Code: CSS, JS (jQuery), Bootstrap JS

DEMO

Owl Carousel 2 Testimonial Slider

Code: CSS, JS (jQuery), Owl carousel

DEMO

Carousel

Code: CSS, JS (jQuery)

DEMO

CodePen Home 3D Carousel

Code: CSS, Vanilla JS

DEMO

Flickity – Hero Slider With Parallax Background Images

Code: CSS, Flickity JS

DEMO

CSS+SVG Carousel

Code: CSS (Stylus), JS (jQuery), SVG

DEMO

Font Showcase With Flickity

Code: CSS, Flickity JS

DEMO

Bootstrap Carousel With Overlay

Code: Bootstrap CSS, Bootstrap JS

DEMO

Product Slider

Code: Bootstrap CSS, Bootstrap JS, jQuery

DEMO

Bootstrap 4 – Carousel With Contents, Outer Controls

Code: Bootstrap CSS, Bootstrap JS, jQuery

DEMO

Pure CSS Carousel

Code: CSS, HTML (Pug)

DEMO

Simple JQuery Infinite Carousel

Code: CSS, jQuery

DEMO