35+ jQuery Sliders - Free Code + Demos
Collection of 35+ jQuery Sliders. All items are 100% free and open-source.
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
1. Image Burn Effect With Mix-blend-mode And Background-position
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
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
Author: Adam Kuhn (cobra_winfrey)
Links: Source Code / Demo, Dribbble Shot
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
Author: Ivan Grozdic (ig_design)
Links: Source Code / Demo
Created on: April 8, 2019
Made with: HTML, CSS, JS
Tags: hover, slider, cursor, animated, button
4. TV Shows Slider
Author: Ivan Grozdic (ig_design)
Links: Source Code / Demo
Created on: April 7, 2019
Made with: HTML, CSS, JS
Tags: slider, hover, cursor, animated, button
5. Hover Slider Multiple Images
Author: Ivan Grozdic (ig_design)
Links: Source Code / Demo
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
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
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
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)
Links: Source Code / Demo
Created on: January 23, 2019
Made with: HTML, SCSS, JS
Tags: slider, css, jquery, transition, infinite
8. Hover Slider
Author: Ivan Grozdic (ig_design)
Links: Source Code / Demo
Created on: December 13, 2018
Made with: HTML, CSS, JS
Tags: slider, hover, cursor, animated, bootstrap
9. Greensock Animated Slider
Author: Artur Sedlukha (sedlukha)
Links: Source Code / Demo
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
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)
Links: Source Code / Demo
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!
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)
Links: Source Code / Demo
Created on: September 8, 2018
Made with: HTML, SCSS, JS
Tags: product, product slider, card slider, star-wars, responsive-slider
12. 50/50 Slider
Author: Skyler Knight (skylerjknight)
Links: Source Code / Demo
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
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)
Links: Source Code / Demo
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
14. Smiley Rating Slider Animation
Author: Aaron Iker (aaroniker)
Created on: August 14, 2018
Made with: HTML, SCSS, JS
15. 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)
Links: Source Code / Demo
Created on: March 28, 2018
Made with: HTML, SCSS, JS
Tags: mask, svg, svg-mask, animation
16. 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)
Links: Source Code / Demo
Created on: September 16, 2018
Made with: HTML, SCSS, JS
Tags: news, news slider, blog, blog slider, card slider
17. Is-selected Flickity Option
How to use the Flickity added class "is-selected" to add some transitions to your Flickity slider.
Author: Kenny (ispykenny)
Links: Source Code / Demo
Created on: February 4, 2018
Made with: HTML, SCSS, JS
18. Arrow Slider
Author: Amy (amydepalma)
Links: Source Code / Demo
Created on: November 14, 2017
Made with: HTML, Less, JS
19. 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)
Links: Source Code / Demo
Created on: January 1, 2017
Made with: HTML, SCSS, JS
Tags: wipe, slice, slider, scrollwheel, scroll jacking
20. Product Card Slider
Author: Pedro Castro (pedrocastro)
Links: Source Code / Demo
Created on: April 6, 2016
Made with: HTML, CSS, JS
Tags: product, card, slider
21. Information Card Slider
Author: Andy Tran (andytran)
Links: Source Code / Demo
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
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)
Links: Source Code / Demo
Created on: March 19, 2015
Made with: HTML, SCSS, JS
Tags: slider, drag-slider, parallax, svg overlay
23. 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)
Links: Source Code / Demo
Created on: June 10, 2017
Made with: HTML, CSS, JS
Tags: animation, slider, swiper, typography, filters
24. Parallax Slideshow
Author: Bruno Carvalho (bcarvalho)
Links: Source Code / Demo
Created on: December 4, 2017
Made with: HTML, SCSS, Babel
25. Split-screen Slideshow
Author: Sean Free (seanfree)
Links: Source Code / Demo
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
Round Dot Slider, testimonial slider
Author: Muhammad Hamza (hamzaxtone)
Links: Source Code / Demo
Created on: July 7, 2020
Made with: HTML, CSS, JS
Tags: dot, testimonial, slider, round
27. Sliding Animation Using GSAP - Codepen Challenge
Author: Alina N. (blackellis)
Links: Source Code / Demo
Created on: June 20, 2020
Made with: HTML, CSS, JS
Tags: cpc-slide, codepenchallenge, gsap, slider, greensock
28. 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)
Links: Source Code / Demo
Created on: August 31, 2018
Made with: HTML, SCSS, JS
Tags: blog, blog slider, blog card, card slider, swiper
29. 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)
Links: Source Code / Demo
Created on: May 12, 2013
Made with: HTML, CSS, JS
Tags: slideshow
30. Background Slider (marquee )
slider marquee background for frontend developers and all user
Author: vahid amiryan (vahid_amiryan)
Links: Source Code / Demo
Created on: May 27, 2020
Made with: HTML, SCSS, JS
Tags: slider, swiper, marquee, animation
31. Slider, Good For Text
Author: C U (-cu-)
Links: Source Code / Demo
Created on: May 13, 2020
Made with: HTML, CSS, JS
Tags: slider
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
More Awesome Lists:
Share: