Collection of free jQuery slider code examples from Codepen, Github and other resources. Update of March 2021 collection. 14 new items.
Related Articles:
Links
Made with
- HTML / CSS / JS
About a code
Slick Slider Control
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: slick.css, slick.js
Links
Made with
- HTML / CSS / JS
About a code
Swiper Slide Devices
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: swiper.css, swiper.js
Links
Made with
- HTML / CSS / JS
About a code
Expandable Animated Card Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, owl.carousel.css, owl.carousel.js
Links
Made with
- HTML / CSS / JS
About a code
CSS Stack Card Slider with jQuery
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Draggable Infinite Slideshow
Draggable infinite slideshow with TweenMax parallax effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tweenmax.js, draggable.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Slide Sync
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: slick.css, slick.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
GSAP Choppy Photo Slider
Animated slider with GSAP.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Thumbnail Slider
Responsive carousel & thumbnail gallery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: swiper.css, swiper.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Custom Image Slider with Line Arrows
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Swiper Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: swiper.css, swiper.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Neumorphism Slider Concept
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: slick.js, gsap.js
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS (Babel)
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: -
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Grid Card Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / 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
Links
Made with
- HTML / CSS / JS
About a code
TV Shows Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, unicons.css
Links
Made with
- HTML / CSS / JS
About a code
Hover slider - multiple images
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS (Babel)
About a code
Split Slider
jQuery split slider with CSS transition
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / 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: -
Links
Made with
- HTML / CSS / JS
About a code
Fullscreen Hover Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, popper.js, bootstrap.js
Links
Made with
- HTML / CSS (SCSS) / 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, slick.js
Links
Made with
- HTML / CSS (Stylus) / JS
About a code
Vertical Thumbnail Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css, slick.css, slick.js
Links
Made with
- HTML / CSS / JS
About a code
Owl Carousel - Google News Style
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: owlcarousel.css, animate.css, owl.carousel.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Responsive Horizontal Timeline using Slick
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, slick.css, slick.js, bootstrap.js
Links
Made with
- HTML / CSS (SCSS) / 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, swiper.js
Links
Made with
- HTML / CSS (SCSS) / 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, swiper.js
Links
Made with
- HTML (Haml) / CSS (Sass) / JS
About a code
50/50 Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: ionicons.css
Links
Made with
- HTML / CSS / JS
About a code
FlexBox Image Carousel
A simple images carousel using Flexbox layout and jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / 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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Slider Animation
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: bootstrap.css, tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / 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, bootstrap.min.js, snap.svg-min.js, tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Card Slider
Simple card slider in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
is-selected Flickity Option
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: flickity.css, flickity.js
Links
Made with
- HTML / CSS (Less) / JS
About a code
Arrow Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: slick.css, slick-theme.css, slick.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Slick Slider with Auto Play YouTube, Vimeo and HTML5 Video
This sample is the tips for slick slider including YouTube, Vimeo and HTML5 video player. Each video plays automatically when the video slide has shown. And the slider fits the browser width.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: slick.css, slick.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Motion Blur Effect Using SVG Filters
This is an experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any JavaScript to properly work, in this example JavaScript is only used for the slider functionality.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: slick.css, slick.js
Links
Made with
- HTML / CSS / JS
About a code
GSAP Slider
Simple GSAP slider with some subtle tween animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Flex Hover Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.waitforimages.js
Links
Made with
- HTML / CSS (SCSS) / 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: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Font Pairings
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.bxslider.js
Links
Made with
- HTML / CSS (Stylus) / JS (Babel)
About a code
jQuery Split 3D Carousel
A new spin on the carousel pattern with a split panel transition in three dimensions.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass) / JS
About a code
Clockwerk
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Product Card Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Simple Slider Effect in CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Information Card Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -