1. Home
  2. Collections
  3. Top 30 Awesome jQuery Sliders
Collection
Post cover
Cupoftea _Cupoftea Created 28 d. ago

Top 30 Awesome jQuery Sliders

#html #css #js #scss #haml #babel #stylus #sass #pug #less

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

CSS Stack Card Slider with jQuery

#html #css #js

Author: Bilal.Rizwaan

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Draggable Infinite Slideshow

#html #css #scss #js

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

#html #css #scss #js

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

#html #css #scss #js

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

#html #css #scss #js

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

#html #haml #css #scss #js #babel

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

#html #haml #css #scss #js

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

#html #css #js

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

#html #css #js

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

#html #css #js

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

#html #haml #css #scss #js #babel

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

#html #css #scss #js

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

#html #css #js

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

#html #css #scss #js

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

#html #css #stylus #js

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

#html #css #js

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

#html #css #scss #js

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

#html #css #scss #js

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

#html #css #scss #js

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

#html #haml #css #sass #js

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

#html #pug #css #scss #js

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

#html #css #scss #js

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

#html #css #scss #js

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

#html #css #scss #js

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

#html #css #scss #js

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

#html #css #less #js

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

#html #css #scss #js

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

#html #css #stylus #js #babel

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

#html #css #js

Author: Pedro Castro

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Information Card Slider

#html #pug #css #scss #js

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!

admin
_Cupoftea

More from _Cupoftea

Best 23 jQuery Checkboxes
#html #css #js #pug #sass #scss
Top 20 jQuery Charts And Graphs
#html #css #js
Top 18 jQuery Carousels
#html #css #js #scss #haml #babel #pug #less #stylus #sass
Best 36 jQuery Forms
#html #haml #css #scss #js #pug #slim #sass
Top 8 jQuery Form Validation Plugins

Follow us on social networks

Feedback