UI Design
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

Multiple Items Per Slide In Bootstrap Carousel
Code: CSS, JS (jQuery)

CodePen Home FlexBox Exercise #3 – Image Carousel
Code: CSS, JS (jQuery)

Carousel Text Animation
Code: CSS, JS (jQuery)

Bootstrap 3 Carousel With Swipe
Code: Bootstrap CSS, Bootstrap JS, TouchSwipe JS

Simple Carousel Pure CSS
Code: CSS only

Owl Carousel – Full Width/Height
Code: CSS, JS (jQuery), Owl carousel

Split 3D Carousel
Code: CSS, JS (jQuery), Babel JS

Bootstrap Slider Full Screen With Animations
Code: Animate CSS, JS (jQuery), Bootstrap JS

Website Header With Bootstrap Carousel
Code: CSS, JS (jQuery), Bootstrap JS

Full Screen Carousel Expose
Code: CSS, JS (jQuery)

Bootstrap Carousel FadeIn & Fadeout
Code: CSS, JS (jQuery), Bootstrap JS

Owl Carousel 2 Testimonial Slider
Code: CSS, JS (jQuery), Owl carousel

Carousel
Code: CSS, JS (jQuery)

CodePen Home 3D Carousel
Code: CSS, Vanilla JS

Flickity – Hero Slider With Parallax Background Images
Code: CSS, Flickity JS

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

Font Showcase With Flickity
Code: CSS, Flickity JS

Bootstrap Carousel With Overlay
Code: Bootstrap CSS, Bootstrap JS

Product Slider
Code: Bootstrap CSS, Bootstrap JS, jQuery

Bootstrap 4 – Carousel With Contents, Outer Controls
Code: Bootstrap CSS, Bootstrap JS, jQuery

Pure CSS Carousel
Code: CSS, HTML (Pug)

Simple JQuery Infinite Carousel
Code: CSS, jQuery
