CSS Image Slider Examples and Code Collection

46 CSS Image Slider Examples and Code

This high-quality and hand-picked collection shows CSS image sliders from across the web. Included are links with examples and code for use on your own website.

Update of September 2020 collection. 32 new items.

Having a CSS image slider is a crucial part of any website or app. Sliders allow you to compact information in a fun interactive way. Here is a collection of sliders from around the web you can use in your own project. These examples include a link to download the code as a zip file. The CSS sliders provided will be written in CSS with sometimes JavaScript mixed in. Using these examples is relatively easy as long as you have some experience in HTML, CSS, and JavaScript. Unzip the file, and you can have these sliders added to your project in minutes!

HTML CSS Driven Responsive Image Slider

HTML CSS Driven Responsive Image Slider
CSS Responisve Image Slider

About Project

HTML CSS Driven Responsive Image Slider

HTML CSS Driven Responsive Image Slider is a project on codepen.io which uses CSS keyframes to generate a sliding animation. This example uses HTML figure and figcaption elements to markup the image element. Also when the screen is resized the slider resizes to fit the screen horizontally.

Author

  • Dudley Storey
  • codepen.io

Responsive Image Slider

Responsive Image Slider
Responsive Image Slider

About Project

Responsive Image Slider

Responsive Image Slider is a project on codepen.io which uses CSS and JQuery to animate a solid rectangle slider. You can add your own images to fill in the colored backgrounds of each slide. The project uses CSS transitions on the next and previous buttons opacity for a fade in fade out hover effect.

Author

  • David Fitas
  • codepen.io

Pure CSS Featured Image Slider

Pure CSS Featured Image Slider
Responsive Image Slider

About Project

Pure CSS Featured Image Slider

Pure CSS Featured Image Slider is a project on codepen.io which uses pure css to create an image slider. The image slider rest within a picture frame, which contrast the physicaly world with a digital slider embedded within it. The CSS slider contains round black buttons in the bottom of the frame to navigate the slides. This example only uses 24 lines of HTML.

Author

  • Joshua Hibbert
  • codepen.io

GSAP Slider

GSAP Slider
GSAP Image Slider

About Project

GSAP Slider

GSAP Slider is a project on codepen.io which uses CSS, GSAP JavaScript library, and JQuery to create an exceptional CSS slider. The slider includes navigation buttons and snippet of text with a read more link. The slider works on multiple screen sizes. This example also uses CSS flex to layout the content within each slide and to place each slide in a row.

Author

  • Goran Vrban
  • codepen.io

Slicebox 3D Image Slider

Slicebox 3D Image Slider
3D Image Slider

About Project

Slicebox 3D Image Slider

Slicebox 3D Image Slider is a project on codepen.io which use CSS, JQuery Slicebox library, and Jquery to create a 3D rotating image slider. This image slider scales to fit the screen as the screen size changes. Also this project includes buttons to navigate the image slides left or right. Included in the CSS styles is a special transition. The transition is preserve-3d which makes the child element keep it’s 3D position.

Author

  • codefactory
  • codepen.io

CSS Only Image Slider

CSS Only Image Slider
CSS Only Image Slider

About Project

CSS Only Image Slider

CSS Only Image Slider is a project on codepen.io which contains two image slides. When a user clicks on one of the buttons a slide is loaded in via an animation. The animation slices the sldie down the middle and blurs out the slide. Then the slide unburs and undos the slice with a new image. This animation is done without the CSS keyframes at-rule.

Author

  • Damián Muti
  • codepen.io

Canvas Image Slider

Canvas Image Slider
Canvas Image Slider

About Project

Canvas Image Slider

Canvas Image Slider is an image slider on codepen.io which uses CSS and the GSAP Tweenmax JavaScript library to create a multilayered lense. The slider acts as a lense as the slider traverse the animation to the next slide. The sider blurs the images, and loads in the image from opposite directions. The slider is broken up into multiple circles within eachother. These circles are where the image loads in from different directions as the slide changes. The example slider is also responsive to different screen sizes.

Author

  • Dario Fuzinato
  • codepen.io

Image Slider With Masking Effect

Image Slider With Masking Effect
Image Slider With Masking

About Project

Image Slider With Masking Effect

Image Slider With Masking Effect is a project on codepen.io which is an image slider designed as cards. When clicking the arrows inside the card, you can navigate the different slides. The card uses a CSS drop shadow to create a raised effect as if the slider is floating above the document. When the slider loads in new text, the text fades into view. This project uses a cool CSS transition style called cubic-bezier which is a type of easement when transitioning the slides.

Author

  • Bhakti Pasaribu
  • codepen.io

Flexbox Image Slider

Flexbox Image Slider
Flexbox Image Slider

About Project

Flexbox Image Slider

Flexbox Image Slider is a project on codepen.io which designed a CSS image slider using CSS flexbox. The slider includes navigation buttons outside of the slider frame. When hovering over the navigation buttons, the buttons scale larger using the CSS transform translateX. This causes buttons to visually enlarge as the cursor is hovering over the button.

Author

  • Katherine Kato
  • codepen.io

Fullscreen Image Slider

Fullscreen Image Slider
Fullscreen Image Slider

About Project

Fullscreen Image Slider

Fullscreen Image Slider is a project on codepen.io which the author has created a image slider that is fullscreen. When the slider is resized using the screen or viewed on a different device the slider resizes the fill the entire screen. The project uses pure JavaScript the give the buttons the ability to control the slider direction. The JavaScript attaches event listeners to each of the navigation buttons which triggers the JavaScript custom slide function.

Author

  • Brad Traversy
  • codepen.io

Modular Responsive Image Slider

Modular Responsive Image Slider
Modular Responsive Image Slider

About Project

Modular Responsive Image Slider

Modular Responsive Image Slider is a project on codepen.io which expands to the full page. The image slider is responsive and resizes to fit different screen sizes. This project is modulare, which means you can stack the sliders like blocks to build different row lengths, or even a grid. When clicking on the navigation dots. The dots animation as a pulse to reflect the click. Also when hovering over the slider, the navigation arrows slide and fade in to become clickable.

Author

  • Eric Porter
  • codepen.io

Auto Generated Responsive CSS Slider

Auto Generated Responsive CSS Slider
Auto Generated CSS Slider

About Project

Auto Generated Responsive CSS Slider

Auto Generated Responsive CSS Slider is a project on codepen.io which utilizes only images as each slider of the slider. The slider is responsive and resizes to fit different screen sizes. This example uses CSS translate3d and CSS keyframe at-rules to control the slide animations.

Author

  • Dudley Storey
  • codepen.io

Image Slider CSS Only

Image Slider CSS Only
Image Slider CSS Only

About Project

Image Slider CSS Only

Image Slider CSS Only is a project on codepen.io which is built out of only HTML and CSS. You can add images to this slider by extending the HTML code and CSS classes that reference a new slide. The user can change slides on the slider by using the white navigation circles in the middle bottom portion of the CSS slider.

Author

  • Sandra Vos
  • codepen.io

Pure CSS3 Responsive Slider

Pure CSS3 Responsive Slider
Pure CSS3 Responsive Slider

About Project

Pure CSS3 Responsive Slider

Pure CSS3 Responsive Slider is a project on codepen.io which is written in pure CSS. This slider include left and right navigational arrows and navigation dots in the middle bottom portion of the slider. The slider uses a CSS keyframe at-rule to fade in the image when the user changes the slide. The fade in effect is aquired by uses the CSS opacity property from low to high and mixing in an ease-in-out CSS transition.

Author

  • Mayur Birle
  • codepen.io

Image Slider With Mobile Swipe

Image Slider With Mobile Swipe
Image Slider With Mobile Swipe

About Project

Image Slider With Mobile Swipe

Image Slider With Mobile Swipe is a image slider on codepen.io which uses HTML, CSS, and pure JavaScript. The image slider include an automatic sliding animation. The animation is triggered every 4 seconds via “let interval = 4000” JavaScript variable. When using this image slider with a mobile device. The slides can be switched by swiping the screen. This functionality is created by using a touchend JavaScript event listener.

Author

  • Hakeem
  • codepen.io
Before After Image Slider (Vanilla)

Before After Image Slider (Vanilla)

About Project

Author

  • Huw Llewellyn
  • codepen.io
Javascriptless Before_After Slider

Javascriptless Before_After Slider

About Project

Author

  • Matthew Steele
  • codepen.io
Before & After Slider Gallery With SVG Masks

Before & After Slider Gallery With SVG Masks

About Project

Author

  • Craig Roblewsky
  • codepen.io
HTML5 Before & After Comparison Slider

HTML5 Before & After Comparison Slider

About Project

Author

  • Dudley Storey
  • codepen.io
HTML5 Video Before-and-After Comparison Slider

Linear Slider With SplitText Effect _ Greensock

About Project

Author

  • Dudley Storey
  • codepen.io
Linear Slider With SplitText Effect _ Greensock

Linear Slider With SplitText Effect _ Greensock

About Project

Author

  • Arden
  • codepen.io
Smooth 3D Perspective Slider

Smooth 3D Perspective Slider

About Project

Author

  • Alex Nozdriukhin
  • codepen.io
Fullscreen Hero Image Slider (Swipe Panels Theme)

Fullscreen Hero Image Slider (Swipe Panels Theme)

About Project

Author

  • Tobias Bogliolo
  • codepen.io
Responsive Parallax Drag-slider With Transparent Letters

Responsive Parallax Drag-slider With Transparent Letters

About Project

Author

  • Ruslan Pivovarov
  • codepen.io
Fancy Slider

Gray & White – Skewed Slider With Scrolling

About Project

Author

  • Nikolay Talanov
  • codepen.io
Gray & White – Skewed Slider With Scrolling

Gray & White – Skewed Slider With Scrolling

About Project

Author

  • Victor Belozyorov
  • codepen.io
Slider with Ripple Effect v1.1

Slider with Ripple Effect v1.1

About Project

Author

  • Pedro Castro
  • codepen.io
Clip-Path Revealing Slider

Clip-Path Revealing Slider

About Project

Author

  • Nikolay Talanov
  • codepen.io
Pure CSS Slider With Custom Effects

Pure CSS Slider With Custom Effects

About Project

Author

  • Nikolay Talanov
  • codepen.io
Fullscreen Drag-Slider With Parallax

Fullscreen Drag-Slider With Parallax

About Project

Author

  • Nikolay Talanov
  • codepen.io
CSS Carousel With Keyboard Controls

CSS Carousel With Keyboard Controls

About Project

Author

  • David Lewis
  • codepen.io
CSS Slider – Pure CSS – #10

CSS Slider – Pure CSS – #10

About Project

Author

  • Ivan Grozdic
  • codepen.io
Slider With Complex Animation and Half-Collored Angled Text

Slider With Complex Animation and Half-Collored Angled Text

About Project

Author

  • Ruslan Pivovarov
  • codepen.io

Recommended Articles

Other Articles

Comments

Tip: Thoughtful and well written comments are voted up more often.
0 Comments

No Comments.