Collection
Post cover

Top 30 Awesome jQuery Sliders

Collection of free jQuery slider code examples. With object scrolling and 3D efffects.

CSS Stack Card Slider with jQuery

Author: Bilal.Rizwaan

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Draggable Infinite Slideshow

Author: Radu

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Draggable infinite slideshow with TweenMax parallax effect.

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

Responsive: yes

Dependencies: tweenmax.js, draggable.js

GSAP Choppy Photo Slider

Author: crankysparrow

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Animated slider with GSAP.

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

Dependencies: gsap.js

Thumbnail Slider

Author: Jack Cohle

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Slider with mix-blend-mode

Author: Jamie Coulter

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS (Babel)

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

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

Grid Card Slider

Author: Adam Kuhn

Links: demo and code, dribbble shot

Made with: HTML (Haml) / CSS (SCSS) / JS

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

Responsive: yes

Hover Slider

Author: Ivan Grozdic

Links: demo and code

Made with: HTML / CSS / JS

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

Links: demo and code

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

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Dependencies: bootstrap.css

Split Slider

Author: Jamie Coulter

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS (Babel)

jQuery split slider with CSS transition.

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

Responsive: yes

Infinite Slider with SCSS & jQuery

Author: Alexis Prevost-Maynen

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Fullscreen Hover Slider

Author: Ivan Grozdic

Links: demo and code

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

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Links: demo and code

Made with: HTML / CSS (Stylus) / JS

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

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

Owl Carousel - Google News Style

Author: Ken Davenport

Links: demo and code

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

Links: demo and code

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

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Links: demo and code

Made with: HTML (Haml) / CSS (Sass) / JS

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

Responsive: yes

Dependencies: ionicons.css

Slider Animations: Pies from the Waitress Musical

Author: Olivia Ng

Links: demo and code

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

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: bootstrap.css, tweenmax.js

SVG Mask Slider

Author: Valery Alikin

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Simple card slider in jQuery.

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

is-selected Flickity Option

Author: Kenny

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: flickity.css, flickity.js

Arrow Slider

Author: Amy

Links: demo and code

Made with: HTML / CSS (Less) / JS

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

Responsive: yes

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

Slice Slider

Author: Stephen Scaff

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

jQuery Split 3D Carousel

Author: Paul Noble

Links: demo and code

Made with: HTML / CSS (Stylus) / JS (Babel)

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

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

Responsive: yes

Product Card Slider

Author: Pedro Castro

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Information Card Slider

Author: Andy Tran

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Responsive: yes

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback