Collection of free jQuery slider code examples from Codepen, Github and other resources. Update of March 2021 collection. 14 new items.

Related Articles:

  1. CSS Sliders
  2. Bootstrap Sliders
  3. Tailwind Sliders

Author

  • Wikyware Net

Made with

  • HTML / CSS / JS

About a code

Slick Slider Control

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: slick.css, slick.js

Author

  • Wikyware Net

Made with

  • HTML / CSS / JS

About a code

Swiper Slide Devices

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: swiper.css, swiper.js

Author

  • Yudiz Solutions Pvt. Ltd.

Made with

  • HTML / CSS / JS

About a code

Expandable Animated Card Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, owl.carousel.css, owl.carousel.js

Author

  • Bilal.Rizwaan

Made with

  • HTML / CSS / JS

About a code

CSS Stack Card Slider with jQuery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Radu

Made with

  • HTML / CSS (SCSS) / JS

About a code

Draggable Infinite Slideshow

Draggable infinite slideshow with TweenMax parallax effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js, draggable.js

Author

  • John Wai

Made with

  • HTML / CSS (SCSS) / JS

About a code

Slide Sync

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: slick.css, slick.js

Author

  • crankysparrow

Made with

  • HTML / CSS (SCSS) / JS

About a code

GSAP Choppy Photo Slider

Animated slider with GSAP.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Author

  • Jack Cohle

Made with

  • HTML / CSS (SCSS) / JS

About a code

Thumbnail Slider

Responsive carousel & thumbnail gallery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: swiper.css, swiper.js

Author

  • Russ Perry

Made with

  • HTML / CSS (SCSS) / JS

About a code

Custom Image Slider with Line Arrows

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Simran Thapa

Made with

  • HTML / CSS / JS

About a code

Swiper Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: swiper.css, swiper.js

Author

  • Fernando Cohen

Made with

  • HTML / CSS (SCSS) / JS

About a code

Neumorphism Slider Concept

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: slick.js, gsap.js

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS) / JS (Babel)

About a code

Slider with mix-blend-mode

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Grid Card Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ivan Grozdic

Made with

  • HTML / CSS / JS

About a code

Hover Slider

jQuery slider with hover effect and dark/light themes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, unicons.css

Author

  • Ivan Grozdic

Made with

  • HTML / CSS / JS

About a code

TV Shows Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, unicons.css

Author

  • Ivan Grozdic

Made with

  • HTML / CSS / JS

About a code

Hover slider - multiple images

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS) / JS (Babel)

About a code

Split Slider

jQuery split slider with CSS transition.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Alexis Prevost-Maynen

Made with

  • HTML / CSS (SCSS) / JS

About a code

Infinite Slider with SCSS & jQuery

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: -

Author

  • Ivan Grozdic

Made with

  • HTML / CSS / JS

About a code

Fullscreen Hover Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, popper.js, bootstrap.js

Author

  • Camila Waz

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animated Slider

Animated slider with jQuery and slick.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: slick.css, slick.js

Author

  • Michael Lewallen

Made with

  • HTML / CSS (Stylus) / JS

About a code

Vertical Thumbnail Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, slick.css, slick.js

Author

  • Ken Davenport

Made with

  • HTML / CSS / JS

About a code

Owl Carousel - Google News Style

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: owlcarousel.css, animate.css, owl.carousel.js

Author

  • David

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive Horizontal Timeline using Slick

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, slick.css, slick.js, bootstrap.js

Author

  • Muhammed Erdem

Made with

  • HTML / CSS (SCSS) / JS

About a code

Responsive News Card Slider

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

Author

  • Muhammed Erdem

Made with

  • HTML / CSS (SCSS) / JS

About a code

Product Slider

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

Author

  • Skyler Knight

Made with

  • HTML (Haml) / CSS (Sass) / JS

About a code

50/50 Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css

Author

  • Veronica

Made with

  • HTML / CSS / JS

About a code

FlexBox Image Carousel

A simple images carousel using Flexbox layout and jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Olivia Ng

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Slider Animations: Pies from the Waitress Musical

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: simple-line-icons.css

Author

  • Valery Alikin

Made with

  • HTML / CSS (SCSS) / JS

About a code

Slider Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css, tweenmax.js

Author

  • Valery Alikin

Made with

  • HTML / CSS (SCSS) / JS

About a code

SVG Mask Slider

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

Author

  • Dejan

Made with

  • HTML / CSS (SCSS) / JS

About a code

Card Slider

Simple card slider in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kenny

Made with

  • HTML / CSS (SCSS) / JS

About a code

is-selected Flickity Option

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: flickity.css, flickity.js

Author

  • Amy

Made with

  • HTML / CSS (Less) / JS

About a code

Arrow Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: slick.css, slick-theme.css, slick.js

Author

  • digistate

Made with

  • HTML / CSS (SCSS) / JS

About a code

Slick Slider with Auto Play YouTube, Vimeo and HTML5 Video

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

Author

  • Damián Muti

Made with

  • HTML / CSS (SCSS) / JS

About a code

Motion Blur Effect Using SVG Filters

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

Author

  • Goran Vrban

Made with

  • HTML / CSS / JS

About a code

GSAP Slider

Simple GSAP slider with some subtle tween animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: tweenmax.js

Author

  • Cameron Fitzwilliam

Made with

  • HTML / CSS (SCSS) / JS

About a code

Flex Hover Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.waitforimages.js

Author

  • Stephen Scaff

Made with

  • HTML / CSS (SCSS) / JS

About a code

Slice Slider

A little slicey transition slider using a simple add class deal. Wanted to see if I could get this interaction butter smooth, with just css transitions, as oppose to a animation lib like Velocity or GSAP. Have to smooth out the timings a bit and decide on the best approach for mobile (just stack, add touch events, make images full viewport, etc. Supports scrollwheel (scroll jacking), nav buttons and arrow keys. Can also increase the content wrapper to make the images fill viewport in their non animating state, which is kinda cool as well.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Shae Scotten

Made with

  • HTML / CSS (SCSS) / JS

About a code

Font Pairings

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.bxslider.js

Author

  • Paul Noble

Made with

  • HTML / CSS (Stylus) / JS (Babel)

About a code

jQuery Split 3D Carousel

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: -

Author

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Clockwerk

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Pedro Castro

Made with

  • HTML / CSS / JS

About a code

Product Card Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sean Stopnik

Made with

  • HTML / CSS (SCSS) / JS

About a code

Simple Slider Effect in CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Andy Tran

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Information Card Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -