jQuery slider code examples

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.

Slick Slider Control

Author:
Wikyware Net | February 1, 2022
Made with:
HTML / CSS / JS

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

Swiper Slide Devices

Author:
Wikyware Net | May 25, 2021
Made with:
HTML / CSS / JS

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

Expandable Animated Card Slider

Author:
Yudiz Solutions Pvt. Ltd. | December 23, 2020
Made with:
HTML / CSS / JS

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

CSS Stack Card Slider with jQuery

Author:
Bilal.Rizwaan | August 24, 2020
Made with:
HTML / CSS / JS

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

Draggable Infinite Slideshow

Author:
Radu | August 1, 2020
Made with:
HTML / CSS (SCSS) / JS

About a code

Draggable infinite slideshow with TweenMax parallax effect.

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

Slide Sync

Author:
John Wai | July 3, 2020
Made with:
HTML / CSS (SCSS) / JS

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

GSAP Choppy Photo Slider

Author:
crankysparrow | June 6, 2020
Made with:
HTML / CSS (SCSS) / JS

About a code

Animated slider with GSAP.

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

Thumbnail Slider

Author:
Jack Cohle | February 6, 2020
Made with:
HTML / CSS (SCSS) / JS

About a code

Responsive carousel & thumbnail gallery.

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

Custom Image Slider with Line Arrows

Author:
Russ Perry | February 6, 2020
Made with:
HTML / CSS (SCSS) / JS

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

Swiper Slider

Author:
Simran Thapa | January 14, 2020
Made with:
HTML / CSS / JS

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

Neumorphism Slider Concept

Author:
Fernando Cohen | January 10, 2020
Made with:
HTML / CSS (SCSS) / JS

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

Slider with mix-blend-mode

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

About a code

Image burn effect with mix-blend-mode and background-position for slider in jQuery.

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

Grid Card Slider

Author:
Adam Kuhn | May 24, 2019
Made with:
HTML (Haml) / CSS (SCSS) / JS

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

Hover Slider

Author:
Ivan Grozdic | April 8, 2019
Made with:
HTML / CSS / JS

About a code

jQuery slider with hover effect and dark/light themes.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, unicons.css

TV Shows Slider

Author:
Ivan Grozdic | April 7, 2019
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, unicons.css

Hover slider - multiple images

Author:
Ivan Grozdic | February 4, 2019
Made with:
HTML / CSS / JS

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

Split Slider

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

About a code

jQuery split slider with CSS transition.

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

Infinite Slider with SCSS & jQuery

Author:
Alexis Prevost-Maynen | January 23, 2019
Made with:
HTML / CSS (SCSS) / JS

About a code

You need a carousel where you can add as many images as you want, no worries, this function is for you.

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

Fullscreen Hover Slider

Author:
Ivan Grozdic | December 13, 2018
Made with:
HTML / CSS / JS

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

Animated Slider

Author:
Camila Waz | November 11, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Animated slider with jQuery and slick.js.

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

Vertical Thumbnail Slider

Author:
Michael Lewallen | October 26, 2018
Made with:
HTML / CSS (Stylus) / JS

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

Owl Carousel - Google News Style

Author:
Ken Davenport | October 23, 2018
Made with:
HTML / CSS / JS

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

Responsive Horizontal Timeline using Slick

Author:
David | October 10, 2018
Made with:
HTML / CSS (SCSS) / JS

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

Responsive News Card Slider

Author:
Muhammed Erdem | September 16, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Another card slider for news and blog pages with swiper.js and sweet animations when mouse hover and slide changes. Also all of them responsive.

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

Product Slider

Author:
Muhammed Erdem | September 8, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Responsive product slider for Star Wars Ipmerial Army's shop. Built with swiper.js.

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

50/50 Slider

Author:
Skyler Knight | May 7, 2018
Made with:
HTML (Haml) / CSS (Sass) / JS

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

FlexBox Image Carousel

Author:
Veronica | April 29, 2018
Made with:
HTML / CSS / JS

About a code

A simple images carousel using Flexbox layout and jQuery.

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

Slider Animations: Pies from the Waitress Musical

Author:
Olivia Ng | April 28, 2018
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
simple-line-icons.css

Slider Animation

Author:
Valery Alikin | April 6, 2018
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Firefox, Opera, Safari
Responsive:
no
Dependencies:
bootstrap.css, tweenmax.js

SVG Mask Slider

Author:
Valery Alikin | March 28, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

A touch-enabled image slider that smoothly transitions between images and text using SVG clipping and masking technology.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, bootstrap.min.js, snap.svg-min.js, tweenmax.js

Card Slider

Author:
Dejan | March 11, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Simple card slider in jQuery.

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

is-selected Flickity Option

Author:
Kenny | February 5, 2018
Made with:
HTML / CSS (SCSS) / JS

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

Arrow Slider

Author:
Amy | November 14, 2017
Made with:
HTML / CSS (Less) / JS

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

Slick Slider with Auto Play YouTube, Vimeo and HTML5 Video

Author:
digistate | July 28, 2017
Made with:
HTML / CSS (SCSS) / JS

About a code

This sample is the tips for slick slider including YouTube, Vimeo and HTML5 video player. Each video plays automatically when the video slide has shown. And the slider fits the browser width.

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

Motion Blur Effect Using SVG Filters

Author:
Damián Muti | July 26, 2017
Made with:
HTML / CSS (SCSS) / JS

About a code

This is an experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any JavaScript to properly work, in this example JavaScript is only used for the slider functionality.

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

GSAP Slider

Author:
Goran Vrban | June 9, 2017
Made with:
HTML / CSS / JS

About a code

Simple GSAP slider with some subtle tween animations.

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

Flex Hover Slider

Author:
Cameron Fitzwilliam | April 20, 2017
Made with:
HTML / CSS (SCSS) / JS

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

Slice Slider

Author:
Stephen Scaff | January 1, 2017
Made with:
HTML / CSS (SCSS) / JS

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

Font Pairings

Author:
Shae Scotten | November 24, 2016
Made with:
HTML / CSS (SCSS) / JS

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

jQuery Split 3D Carousel

Author:
Paul Noble | November 7, 2016
Made with:
HTML / CSS (Stylus) / JS (Babel)

About a code

A new spin on the carousel pattern with a split panel transition in three dimensions.

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

Clockwerk

Author:
▥ | August 28, 2016
Made with:
HTML (Pug) / CSS (Sass) / JS

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

Product Card Slider

Author:
Pedro Castro | April 6, 2016
Made with:
HTML / CSS / JS

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

Simple Slider Effect in CSS

Author:
Sean Stopnik | February 3, 2016
Made with:
HTML / CSS (SCSS) / JS

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

Information Card Slider

Author:
Andy Tran | November 23, 2015
Made with:
HTML (Pug) / CSS (SCSS) / JS

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

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. ✨