Connect with us

UI Design

Website Carousel Design

Published

on

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

netflix style video carousel

DEMO

Multiple Items Per Slide In Bootstrap Carousel

Code: CSS, JS (jQuery)

bootstrap carousel

DEMO

CodePen Home FlexBox Exercise #3 – Image Carousel

Code: CSS, JS (jQuery)

image carousel

DEMO

Carousel Text Animation

Code: CSS, JS (jQuery)

carousel text animation

DEMO

Bootstrap 3 Carousel With Swipe

Code: Bootstrap CSS, Bootstrap JS, TouchSwipe JS

bootstrap with swipe

DEMO

Simple Carousel Pure CSS

Code: CSS only

simple carousel pure css

DEMO

Owl Carousel – Full Width/Height

Code: CSS, JS (jQuery), Owl carousel

owl carousel full width

DEMO

Split 3D Carousel

Code: CSS, JS (jQuery), Babel JS

split 3d carousel

DEMO

Bootstrap Slider Full Screen With Animations

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

bootstrap slider full screen with animations

DEMO

Website Header With Bootstrap Carousel

Code: CSS, JS (jQuery), Bootstrap JS

website header with bootstrap carousel

DEMO

Full Screen Carousel Expose

Code: CSS, JS (jQuery)

full screen carousel expose

DEMO

Bootstrap Carousel FadeIn & Fadeout

Code: CSS, JS (jQuery), Bootstrap JS

bootstrap carousel fadein & fadeout

DEMO

Owl Carousel 2 Testimonial Slider

Code: CSS, JS (jQuery), Owl carousel

owl carousel 2 testimonial slider

DEMO

Carousel

Code: CSS, JS (jQuery)

carousel web

DEMO

CodePen Home 3D Carousel

Code: CSS, Vanilla JS

3d carousel

DEMO

Flickity – Hero Slider With Parallax Background Images

Code: CSS, Flickity JS

flickity hero slider with parallax background images

DEMO

CSS+SVG Carousel

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

css svg carousel

DEMO

Font Showcase With Flickity

Code: CSS, Flickity JS

font showcase with flickity

DEMO

Bootstrap Carousel With Overlay

Code: Bootstrap CSS, Bootstrap JS

bootstrap carousel with overlay

DEMO

Product Slider

Code: Bootstrap CSS, Bootstrap JS, jQuery

product slider

DEMO

Bootstrap 4 – Carousel With Contents, Outer Controls

Code: Bootstrap CSS, Bootstrap JS, jQuery

bootstrap 4 carousel with contents outer controls

DEMO

Pure CSS Carousel

Code: CSS, HTML (Pug)

pure css carousel

DEMO

Simple JQuery Infinite Carousel

Code: CSS, jQuery

simple jquery infinite carousel

DEMO

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *