• Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Media

15 CSS Sliders

June 27, 2020
in Media

CSS sliders are Hand-picked free collections and developed using HTML, CSS and JavaScript.

3D Cube Carousel

3D Cube Carousel developed using HTML, jQuery, and SCSS. 4-sided carousel/slider in three, count ’em THREE, dimensions.

You might also like

Animated Fullscreen and grid view Slider

Unicycle Range Slider

10 CSS Logo Designs

CSS Advent Calendar

HTML Audio Player

Realistic 3D Photo Card Gallery

Developed by: Derek Wheelden – Created on February 4, 2014, Updated on February 4, 2014

Demo and Download

Yahoo like Weather App CSS Sliders

Yahoo like Weather App Slider developed using HTML, jQuery, and CSS.

Developed by: Chris Coyier – Created on May 13, 2013, Updated on May 17, 2013

Demo and Download

Pure CSS Image Slider

Pure CSS Featured Image Slider developed using HTML, jQuery, and CSS.

Developed by: Joshua Hibbert – Created on June 23, 2012, Updated on June 16, 2016

Demo & Download

Flexslider with simple CSS animated layers

Flexslider slider with master sliders like animated layers like title, description, price tag, and category tag. pure CSS animations for slider layers. Flexslider developed using HTML, jQuery, CSS.

Developed by: Komeyl – Created on July 18, 2015, Updated on February 25, 2017

Demo & Download

Responsive Image Slider

Responsive Image Slider developed using HTML, JS, and CSS. A basic responsive image slider featuring next/previous buttons with a bullet based sub-navigation created with a bit of jQuery.

Developed by: David Fitas – Created on January 5, 2016, Updated on November 20, 2016

Demo & Download

jQuery Slider with Items

15 CSS Sliders 1
Demo image: jQuery Slider with Items

JQuery Slider with Items developed using Haml, SCSS.

Developed by: Gerta Xhepi – Created on March 17, 2016, Updated on August 3, 2016

Demo & Download

Double exposure carousel slider

Double exposure carousel slider developed using HTML, Babel, and CSS. Double exposure is a photographic technique that combines 2 different images into a single image. Then I use this technique with canvas blend modes.

Developed by: Misaki Nakano – Created on June 29, 2016, Updated on August 6, 2017

Demo & Download

Layered parallax with jQuery

Layered parallax developed using HTML, jQuery, Flickity, and CSS.

Developed by: Dave DeSandro – Created on July 9, 2016, Updated on July 11, 2016

Demo & Download

Island parallax Flickity

Island parallax Flickity developed using HTML, JS, flickity, and CSS.

Developed by: Dave DeSandro – Created on July 12, 2016, Updated on July 12, 2016

Demo & Download

Simple GSAP slider

Simple GSAP slider developed using HTML, jQuery, CSS. Simple GSAP slider with some subtle tween animations.

Developed by: Goran Vrban – Created on June 9, 2017, Updated on June 9, 2017

Demo & Download

Vue card carousel

The Vue card carousel developed using SCSS, jQuery, Pug. A multi-item card carousel in Vue. It was fun thinking about how this should be viewed from the perspective of a component. It basically takes a window size and increases/decreases the pagination window on each click, which updates a style that translates the images. Values are hardcoded for demonstration but it could be made generic via props.

Developed by: Will – Created on August 27, 2018 – Updated on November 25, 2019

Demo & Download

Split Slick Slideshow

Split Slick Slideshow developed using jquery, HTML, SCSS. Vertical slideshow in split-screen.

Developed by: Fabio Ottaviani – Created on March 24, 2017 – Updated on October 11, 2018

Demo & Download

Slider transitions

Slider transitions developed using jQuery, HTML, CSS. Exploring some slider transitions Swiper slider with parallax option enabled. Playing with CSS filters mostly here.

Developed by: Mirko Zorić – Created on June 10, 2017 – Updated on June 12, 2017

Demo & Download

React Slider with Hover Effect

React Slider with Hover Effect developed using Babel, react, SCSS. A slider/carousel built with React. The x and y coordinates of the current slide are set to CSS variables to create dynamic transition effects on mouseover.

Developed by: Ryan Mulligan – Created on August 3, 2019 – Updated on August 28, 2019

Demo & Download

Distorted Gallery

Simple Distorted Gallery relying on CSS transitions, with configurable SCSS variables. React used because I don’t even remember how to write non-react code anymore. But js code is fairly straightforward and mostly just sets classes.

Developed by: Nikolay Talanov – Created on August 18, 2019 – Updated on August 18, 2019

Demo & Download
Tags: css slidersmedia
Previous Post

jQuery plugin for CSS3 text animations

Next Post

Frontend Text Banner Animation

Related Stories

Animated Fullscreen and grid view Slider
Media

Animated Fullscreen and grid view Slider

July 8, 2020
Unicycle Range Slider
Media

Unicycle Range Slider

July 7, 2020
10 CSS Logo Designs
Media

10 CSS Logo Designs

May 11, 2020
CSS Advent Calendar
Media

CSS Advent Calendar

December 24, 2019
HTML Audio Player
Media

HTML Audio Player

December 10, 2019
Realistic 3D Photo Card Gallery
Media

Realistic 3D Photo Card Gallery

November 27, 2019
Next Post
Frontend Community Banner Animation

Frontend Text Banner Animation

Discussion about this post

You might also like

CSS Cards

100 Creative CSS Cards

November 13, 2022
Multi step html form

44 Free Multi step HTML forms

March 7, 2023
CSS & HTML Dashboard Templates

13 Free HTML & CSS Dashboard Template Designs

December 29, 2021
49 CSS Tables

49 CSS Tables

November 13, 2019
HTML & CSS pricing tables

20 HTML & CSS pricing tables

May 2, 2020
CSS Dark Mode

14 Best CSS Dark Mode

October 13, 2021
w3tweaks

Unleash your front-end development potential by exploring the ultimate collection of UI designs and patterns, and play with them to create stunning websites through our tutorials.

Tags

Angularjs AngularJS Tutorials animation animation examples Button button hover effect Buttons Calendar calendars cards click buttons CSS css3 css buttons css calendar css calendars css effects css hover effects demo effect effects essentials forms free Free Tool hover hover animation Hover effects html inputs Javascript jquery js learn loaders menu mouse hover effects navigation php script text effects tool tutorial tutorials YouTube

Stay Connected

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In