jQuery carousel examples and plugins

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Auto Rotate Slider

Author:
PedalsUp | May 20, 2022
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Mostly CSS Responsive Carousel

Author:
David Bushell | June 10, 2021
Made with:
HTML / CSS (SCSS) / JS

About a code

Features: 1. progressively enhanced (only previous/next buttons require JavaScript); 2. handles focus state and keyboard navigation; 3. uses CSS scroll-snap for transitions and touch control; 4. respects reduced motion preference; 5. aspect ratios are preferred but max-width overrules.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Scrolling 3D Gallery Using Flickity Transformer

Author:
coder787 | April 14, 2021
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
flickity.css, flickity.js, jquery.mousewheel.js

"Kyoto Highlights" - Flickity Slideshow

Author:
Radu | July 23, 2020
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css, flickity.js

Testimonials Carousel

Author:
Gabriel Toledo | June 22, 2020
Made with:
HTML / CSS / JS

About a code

jQuery testimonials card carousel with Owl.Carousel plugin.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, owl.carousel.css, owl.carousel.js

Modern Carousel with Flickity

Author:
Radu | June 19, 2020
Made with:
HTML / CSS (SCSS) / JS

About a code

jQuery modern image carousel with Flickity.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
flickity.js

Variable Fonts Experiment

Author:
Supremo | September 6, 2019
Made with:
HTML / CSS / JS

About a code

A quick experiment with variable fonts. Variables fonts look to have an interesting future, providing the ability to use all variations of a typeface in a single compressed file and being able to animate between these variations.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
slick.css, jquery.js, slick.js

3D Carousel Materialize

Author:
Crianbluff | July 23, 2019
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
materialize.css, materialize.js

Portfolio Carousel

Author:
Jamie Coulter | May 30, 2019
Made with:
HTML (Haml) / CSS (SCSS) / JS (Babel)

About a code

Portfolio concept with carousel.

Compatible browsers:
Chrome, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Spotify Style Carousel

Author:
Kilian So | April 27, 2019
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

Horizontal overflow scrolling cards in Spotify style that work on desktop and mobile.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Camera Showroom

Author:
januaryofmine | March 21, 2019
Made with:
HTML / CSS (SCSS) / JS

About a code

Simple carousel using Swiper.js

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
swiper.css, jquery.js, swiper.js

Testimonial Carousel Design

Author:
FinByz Tech Pvt. Ltd | February 23, 2019
Made with:
HTML / CSS / JS

About a code

Testimonial carousel design with CSS animation, Owl Carousel and jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
owl.carousel.css, jquery.js, owl.carousel.js

Directional Carousel

Author:
Anya Melnyk | December 19, 2018
Made with:
HTML / CSS / JS (Babel)

About a code

3D planets directional slider/carousel.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js, tweenmax.js, morphsvgplugin.js

Flipping Card Slider

Author:
Jesús Castro | September 24, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Flipping card slider in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
slick.css, slick-theme.css, jquery.js, web-animations.js, smooth-scrollbar.js, slick.js

3D Carousel with GSAP

Author:
Cedrick | June 5, 2018
Made with:
HTML / CSS (Less) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js, tweenmax.js, splittext.js

Mouse Driven Carrousel Concept

Author:
web-tiki | May 30, 2018
Made with:
HTML / CSS / JS

About a code

UI test for a horizontal scroll carrousel concept. The elements scroll on mouse horizontal move.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Custom Carousel

Author:
Collin Smith | April 21, 2018
Made with:
HTML (Pug) / CSS (Stylus) / JS

About a code

A custom carousel created using some jQuery. Click slides or press left & right arrow keys.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Change direction from horizontal to vertical

Author:
Mehul Rojasara | March 15, 2018
Made with:
HTML / CSS / JS

About a code

Change direction from horizontal to vertical carousel.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
bootstrap.css, swiper.css, jquery.js, bootstrap.js, swiper.js

Simple Photo Carousel

Author:
Alex Bratsos | September 24, 2017
Made with:
HTML / CSS (SCSS) / JS (Babel)

About a code

A simple carousel for photo images with parallax in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js

Vertical Carousel

Author:
Danil Goncharenko | August 15, 2017
Made with:
HTML / CSS (Sass) / JS

About a code

Animated vertical carousel with jQuery and TweenMax.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js, tweenmax.js

Full Screen Carousel Expose

Author:
Virgil Pana | April 3, 2015
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
easing.js

Quick and Simple Rotating Pseudo-3D Carousel

Author:
Sergey Stoma | October 30, 2014
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
velocity.js, hammer.js

slick

Author:
Ken Wheeler | 2014
Made with:
HTML / CSS / JS

About a code

The last carousel you'll ever need. Features: fully responsive (scales with its container), separate settings per breakpoint, uses CSS3 when available (fully functional when not), swipe enabled (or disabled, if you prefer), desktop mouse dragging, infinite looping, fully accessible with arrow key navigation, add/remove/filter/unfilter slides, autoplay, dots, arrows, callbacks, etc...

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Owl Carousel 2

Author:
OwlCarousel2 | 2014
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨