21 jQuery Sliders

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

About a code

Grid Card Slider

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

Responsive: yes

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

About a code

TV Shows Slider

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

Responsive: yes

Dependencies: bootstrap.css, unicons.css, jquery.js

About a code

Hover slider - multiple images

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

Responsive: yes

Dependencies: bootstrap.css, jquery.js

About a code

Split Slider

jQuery split slider with CSS transition.

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

Responsive: yes

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

About a code

Fullscreen Hover Slider

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

Responsive: yes

Dependencies: bootstrap.css, jquery.js, popper.js, bootstrap.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

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

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

About a code

50/50 Slider

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

Responsive: yes

Dependencies: ionicons.css, jquery.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

About a code

Slider Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css, jquery.js, tweenmax.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

About a code

Card Slider

Simple card slider in jQuery.

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

Responsive: no

Dependencies: jquery.js

About a code

is-selected Flickity Option

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

Responsive: yes

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

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

About a code

Product Card Slider

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

Responsive: yes

Dependencies: jquery.js

About a code

Information Card Slider

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

Responsive: yes

Dependencies: jquery.js