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
-
Marketing Tips2 days ago
What is my Instagram URL? How to Find & Copy Address [Guide on Desktop or Mobile]
-
Business Imprint3 days ago
About Apple Employee and Friends&Family Discount in 2024
-
App Development3 days ago
How to Unlist your Phone Number from GetContact
-
News4 days ago
Open-Source GPT-3/4 LLM Alternatives to Try in 2024
-
Crawling and Scraping4 days ago
Comparison of Open Source Web Crawlers for Data Mining and Web Scraping: Pros&Cons
-
Grow Your Business2 days ago
Best Instagram-like Apps and their Features
-
Grow Your Business4 days ago
How to Become a Prompt Engineer in 2024
-
Marketing Tips2 days ago
B2B Instagram Statistics in 2024