Collection of free jQuery slider code examples.

21 jQuery Sliders

Collection of free jQuery slider code examples.

Related Articles:

  1. CSS Sliders

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: jquery.js

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: jquery.js

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, jquery.js

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, jquery.js

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, jquery.js

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: jquery.js

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: jquery.js

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, jquery.js, 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, jquery.js, slick.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, jquery.js, 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, jquery.js, 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, jquery.js

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, jquery.js

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, jquery.js, 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, jquery.js, 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: jquery.js

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, jquery.js, 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, jquery.js, slick.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: jquery.js

Author

  • Pedro Castro

Made with

  • HTML / CSS / JS

About a code

Product Card Slider

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

Responsive: yes

Dependencies: jquery.js

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: jquery.js

back to top