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
  • Scripts
    • 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
  • Scripts
    • 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

W3TWEAKS by W3TWEAKS
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

Animated Fullscreen and grid view Slider

July 8, 2020
Unicycle Range Slider

Unicycle Range Slider

July 7, 2020

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

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Animated Fullscreen and grid view Slider

Animated Fullscreen and grid view Slider

by W3TWEAKS
July 8, 2020

Animated Fullscreen Slider developed using HTML, JavaScript, and CSS. This is a fullscreen slider that has next, previous, and grid...

Unicycle Range Slider

Unicycle Range Slider

by W3TWEAKS
July 7, 2020

Unicycle Range Slider developed using HTML, JavaScript and CSS. A range input where a stick figure is on a unicycle...

10 CSS Logo Designs

10 CSS Logo Designs

by W3TWEAKS
May 11, 2020

Pure hand-picked HTML and CSS logo design collections. Demo and Downloads are available.  CSS Hexagonal Logo Demo Image: CSS Hexagonal Logo Demo...

CSS Advent Calendar

CSS Advent Calendar

by W3TWEAKS
December 24, 2019

CSS calendar will have options to show the events saved for the dates. purely developed by CSS only. css only....

Next Post
Frontend Community Banner Animation

Frontend Text Banner Animation

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • 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
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools