35+ jQuery Sliders - Free Code + Demos

Collection of 35+ jQuery Sliders. All items are 100% free and open-source.

1. Image Burn Effect With Mix-blend-mode And Background-position

jQuery Sliders - Image burn effect with mix-blend-mode and background-position
Author: Jamie Coulter (jcoulterdesign)
Created on: June 3, 2019
Made with: Haml, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Haml
Tags: transition, burn, blend-modes, slider, background-position

2. Grid Card Slider

jQuery Sliders - Grid Card Slider
Author: Adam Kuhn (cobra_winfrey)
Created on: May 24, 2019
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml

3. Hover Slider - JQuery Slider

jQuery Sliders - Hover Slider - JQuery Slider
Author: Ivan Grozdic (ig_design)
Created on: April 8, 2019
Made with: HTML, CSS, JS
Tags: hover, slider, cursor, animated, button

4. TV Shows Slider

jQuery Sliders - TV Shows Slider
Author: Ivan Grozdic (ig_design)
Created on: April 7, 2019
Made with: HTML, CSS, JS
Tags: slider, hover, cursor, animated, button

5. Hover Slider Multiple Images

jQuery Sliders - Hover Slider Multiple Images
Author: Ivan Grozdic (ig_design)
Created on: February 4, 2019
Made with: HTML, CSS, JS
Tags: slider, hover, cursor, animated, button

6. Split Slider / Showcase Portfolio With Reveal In CSS Only

jQuery Sliders - Split Slider / Showcase Portfolio with reveal in CSS only
Author: Jamie Coulter (jcoulterdesign)
Created on: January 23, 2019
Made with: Haml, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Haml
Tags: portfolio, transition, pure-css, css, ui

7. Infinite Slider With SCSS & JQuery

jQuery Sliders - 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
Author: Alexis Prevost-Maynen (pmalexis)
Created on: January 23, 2019
Made with: HTML, SCSS, JS
Tags: slider, css, jquery, transition, infinite

8. Hover Slider

jQuery Sliders - Hover slider
Author: Ivan Grozdic (ig_design)
Created on: December 13, 2018
Made with: HTML, CSS, JS
Tags: slider, hover, cursor, animated, bootstrap

9. Greensock Animated Slider

jQuery Sliders - Greensock animated slider
Author: Artur Sedlukha (sedlukha)
Created on: July 16, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animation, gsap, greensock, slider

10. Responsive News Card Slider

jQuery Sliders - Responsive News Card Slider
I builth another Card Slider for news and blog pages etc with swiper.js. I made sweet animations when mouse hover and slide changes. Also all of them responsive.
Author: Muhammed Erdem (JavaScriptJunkie)
Created on: September 16, 2018
Made with: HTML, SCSS, JS
Tags: news, news slider, blog, blog slider, card slider

11. Star Wars Imperial Army's Product Slider!

jQuery Sliders - Star Wars Imperial Army's Product Slider!
Responsive product slider for Star Wars Ipmerial Army's shop. Built with swiper.js. I hope you like it. By the way "May the force be with you."
Author: Muhammed Erdem (JavaScriptJunkie)
Created on: September 8, 2018
Made with: HTML, SCSS, JS
Tags: product, product slider, card slider, star-wars, responsive-slider

12. 50/50 Slider

jQuery Sliders - 50/50 Slider
Author: Skyler Knight (skylerjknight)
Created on: May 7, 2018
Made with: Haml, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Haml

13. Slider Animations: Pies From The Waitress Musical

jQuery Sliders - Slider Animations: Pies from the Waitress Musical
It started out with a simple recipe UI thing, but I couldn't just put one pie. Now it's a slider with animation! Well sorta, I didn't plan the structure properly and sorta hacked my way through. Anyway, pies from the Waitress musical!! Super love the names, there's one called "My Husband...
Read More
Author: Olivia Ng (oliviale)
Created on: April 28, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: slider, animation, pies, more pies, recipe

15. SVG Mask Slider

jQuery Sliders - SVG Mask Slider
A touch-enabled image slider that smoothly transitions between images and text using SVG clipping and masking technology.
Author: Valery Alikin (AlikinVV)
Created on: March 28, 2018
Made with: HTML, SCSS, JS
Tags: mask, svg, svg-mask, animation

16. Responsive News Card Slider

jQuery Sliders - Responsive News Card Slider
I builth another Card Slider for news and blog pages etc with swiper.js. I made sweet animations when mouse hover and slide changes. Also all of them responsive.
Author: Muhammed Erdem (JavaScriptJunkie)
Created on: September 16, 2018
Made with: HTML, SCSS, JS
Tags: news, news slider, blog, blog slider, card slider

17. Is-selected Flickity Option

jQuery Sliders - is-selected Flickity Option
How to use the Flickity added class "is-selected" to add some transitions to your Flickity slider.
Author: Kenny (ispykenny)
Created on: February 4, 2018
Made with: HTML, SCSS, JS

18. Arrow Slider

jQuery Sliders - Arrow Slider
Author: Amy (amydepalma)
Created on: November 14, 2017
Made with: HTML, Less, JS

19. Slice Slider

jQuery Sliders - 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 (j...
Read More
Author: Stephen Scaff (StephenScaff)
Created on: January 1, 2017
Made with: HTML, SCSS, JS
Tags: wipe, slice, slider, scrollwheel, scroll jacking

20. Product Card Slider

jQuery Sliders - Product Card Slider
Author: Pedro Castro (pedrocastro)
Created on: April 6, 2016
Made with: HTML, CSS, JS
Tags: product, card, slider

21. Information Card Slider

jQuery Sliders - Information Card Slider
Author: Andy Tran (andytran)
Created on: November 23, 2015
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: material design, card, animation, product, info

22. Fullscreen Drag-slider With Parallax

jQuery Sliders - Fullscreen drag-slider with parallax
Sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine. Source of inspiration - https://stupid-studio.com/ (their js is minified, so all code is mine, except some parts of svg, like viewBox/minHeight).
Author: Nikolay Talanov (suez)
Created on: March 19, 2015
Made with: HTML, SCSS, JS
Tags: slider, drag-slider, parallax, svg overlay

23. Slider Transitions

jQuery Sliders - Slider transitions
Exploring some slider transitions. I am using Swiper slider with parallax option enabled. Playing with CSS filters mostly here.
Author: Mirko Zorić (fluxus)
Created on: June 10, 2017
Made with: HTML, CSS, JS
Tags: animation, slider, swiper, typography, filters

24. Parallax Slideshow

jQuery Sliders - Parallax Slideshow
Author: Bruno Carvalho (bcarvalho)
Created on: December 4, 2017
Made with: HTML, SCSS, Babel

25. Split-screen Slideshow

jQuery Sliders - Split-screen Slideshow
Author: Sean Free (seanfree)
Created on: January 1, 2017
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: slideshow, jquery

26. Round Dot Testimonial Slider

jQuery Sliders - Round Dot Testimonial Slider
Round Dot Slider, testimonial slider
Author: Muhammad Hamza (hamzaxtone)
Created on: July 7, 2020
Made with: HTML, CSS, JS
Tags: dot, testimonial, slider, round

27. Sliding Animation Using GSAP - Codepen Challenge

jQuery Sliders - Sliding Animation Using GSAP - Codepen Challenge
Author: Alina N. (blackellis)
Created on: June 20, 2020
Made with: HTML, CSS, JS
Tags: cpc-slide, codepenchallenge, gsap, slider, greensock

28. Responsive Blog Card Slider

jQuery Sliders - Responsive Blog Card Slider
Responsive slider for featured blog posts. Also can use for other things like card slider. Built with Swiper slider.
Author: Muhammed Erdem (JavaScriptJunkie)
Created on: August 31, 2018
Made with: HTML, SCSS, JS
Tags: blog, blog slider, blog card, card slider, swiper

29. Slideshow

jQuery Sliders - Slideshow
Inspired by this pen, this is a slideshow with fixed images. The essential of it could be made using html/css only but the css attr function doesn't support custom datatypes currently, to use it as an url. This slideshow supports permalinks with anchors (So we could use it as a photo blog ...
Read More
Author: Bali Balo (bali_balo)
Created on: May 12, 2013
Made with: HTML, CSS, JS
Tags: slideshow

30. Background Slider (marquee )

jQuery Sliders - background slider (marquee )
slider marquee background for frontend developers and all user
Author: vahid amiryan (vahid_amiryan)
Created on: May 27, 2020
Made with: HTML, SCSS, JS
Tags: slider, swiper, marquee, animation

31. Slider, Good For Text

jQuery Sliders - Slider, Good For Text
Author: C U (-cu-)
Created on: May 13, 2020
Made with: HTML, CSS, JS
Tags: slider