Collection
Post cover
Created 4 month back

Top 30 Awesome jQuery Sliders

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Product Card Slider

Author: Pedro Castro

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

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

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

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

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

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

Follow us on social networks

Feedback