CLOSE

CSS Slideshows

(33 submissions) | Mar 27, 2017 (latest edition)

A set of slideshows created with CSS, enabling you to display different types of media in neat and dynamic fashion.

CLOSE
  • A nice vertical split effect to create amazing photo slideshows

  • ‘Free mobile touch slider with lots of transitions and effects, ideal for mobile websites, mobile web apps, and mobile native/hybrid apps. Works in iOS, Android, Windows Phone 8 and modern Desktop browsers’

  • This layout contains two smarts features, mainly its presentation as a transitional page within presets images with smooth animation; and secondly an off canvas menu with a direct link to every image.

  • A beautiful code experiment in CSS for a different set of slideshows supporting multiple layouts. This allows the arrangement of elements in a unique way, making your site stand out. It uses 3d transforms and an animation library called anime.js.

  • A stunning slider that features Yoshi´s Island and uses a parallax effect to move through four different environments before reaching the final destination. It was made with Flickity, is full of colorful plants, animals and much more.

  • A cool snippet featuring a 3D circle slider that rotates sideways depending on the clicked arrow, showing several products, a perfect feature to include in your site.

  • A lightweight and open source slider developed in CSS and JS that features CSS animated elements.

  • SVG Hero Slider is a code snippet that allows creating smooth slider transitions layered by vector shapes. It comes along with a short tutorial that explains how it was created by Claudia Romano.

  • This splitting image slideshow was created with pure CSS, showing several images that break apart into multiple pieces. Once this happens, the next image appears and the process repeats over and over. This creation was put together by Nate Wiley.

  • A gallery depth slider created with CSS and jQuery. It works by scrolling or selecting one of the dots so the sliding animation tooks place. It shows two images, one of them with the caption. This code snippet was created by Nikolay Talanov.

  • A plugin made with CSS and JavaScript, perfect for creating HTML presentations and slideshows. The presentations can be manipulated with the keyboard arrows, making it simple to navigate through them. It comes under the MIT license and it was created by Caleb Troughton.

  • A compelling image slider made with CSS composed of two stacks of cards from which images get “picked up”. This experimental slider uses CSS 3D transforms and perspective. This work in modern browsers perfectly, but still has some bugs.

  • This amazing free slider displays four different images with their respective text sections, going through them smoothly while making full use of the power of CSS3’s animation property. Keep in mind, however, that this interesting resource might not work in Opera and IE, since they do not support all of its CSS3 features.

  • This slideshow avoids the creation of new browser history steps when browsing through the images, like is the case with other similar tools. To achieve this result, CSSDeck user simonpicos makes use of radio input buttons with the :checked pseudo-class to take control of the slides.

  • The guys at Elemis Freebies are giving out this fantastic template for a vertical carousel in both light and dark color alternatives. This tool can be very useful to showcase news, posts, articles and related content in a clean way, providing thumbnail, headline and sub-text to catch the reader’s attention.

  • As a follow-up to their vertical version of this same resource, the guys at Elemis Freebies are now giving away the template for this delightful horizontal new carousel, useful for different types of posts and articles. It comes in both light and dark colors and displays thumbnails, headers and sub-text.

  • This freebie provides you with two clean, polished sliders so you can display content in an uncomplicated way to your visitors. They come with their respective PSD files and HTML templates, allowing you to apply any modifications as you see fit. Resource hosted at Elemis.

  • A neat freebie pack including three different minimalist sliders that allow you to showcase content with a clean presentation. The images slide with a subtle fade effect, for an event smoother interface. They come with their respective PSD and HTML templates, just because we love to please you.

  • This tutorial shows you how to create an amazing photo stack filled with all sorts of cool animations and transition effects when going through images. Everything is created with pure CSS3, ensuring smooth playback in modern browsers and even mobile devices.

  • Display tabbed content with this simple code snippet created with pure CSS. The blue section on the bottom allows you to go through sections, while a smooth animation moves the elements around accordingly. Moreover, a nicely texturized background wraps up the design. Uploaded by CodePen user Scott Magdalein.

  • More of an experiment than an actual functional design, this pen has a go at creating a slider that displays images in full screen and includes thumbnails for different albums on top. Arrows on the sides also aid you with navigation. Designed by John Motyl Jr using pure CSS.

  • This very fun project for displaying pictures runs a super fast slideshow when hovering on the images. When the mouse is moved away, the current image is displayed. Hover again to get a new picture in the frenzy roulette. You can choose to add titles on top or leave the image clean.

  • A fancy Codrops project for creating a set of sliding image panels by using only CSS. The concept relies on a set of panels with background images (plus titles and sub-text) that animate when clicking on a label. It comes with four different animations, all working smoothly in browsers with CSS transition compatibility.

  • This thorough Codrops tutorial will guide you through the creation of a neat slideshow with a parallax effect, taking advantage of a few CSS3 properties. The idea is to control the slides with radio buttons, having two background images that transition at different speeds, generating the parallax effect.

  • This design intends to recreate the famous Cover Flow feature found in many Apple products. You can either click on the numbers below or directly on the images to select them. You can also find a subtle reflection effect, everything with pure CSS. Uploaded to CodePen by Chris Mounsey.

  • A very simple image slider brought to life with nothing but CSS. The idea is to have a set of images that change automatically after a few seconds, but you can stop them by hovering on the design, which also triggers a subtle zooming effect. All credit goes to CSSDeck’s Daniel Henriquez.

  • This code snippet prevents page jumps every time the user switches between slides. This is achieved with the help of a checkbox or radio hack technique in order to access each slide with a :checked selector, all with pure CSS. The slideshow also includes transition effects and is cross-browser compatible.

  • This project intends to provide an easy slider, coded with nothing more than HTML and CSS. It uses :target to work, so you might have to consider the fact that it creates additional browser history steps when going through slides. Uploaded to CSS Deck by Joshua Hibbert.

  • A super smooth slider that allows the user to view the pictures in it by hovering over the thumbnails below. The images transition nicely between them, using only CSS. Additionally, the design in entirely in black and white, except for the images being seen at the moment, which appear in color. Created by Marco Barría.

  • A very simple slider, featuring a frame that goes around the image, as if it was hung on the wall. When hovering over the design, a set of dots animate into the view, allowing the user to browse through the pictures. This project was created with pure CSS by Joshua Hibbert.

  • An awesome slideshow displayed in the shape of a half-circle. In order to explore through the images, simply click on the numbers below, as a neat animation will bring the corresponding picture. Project styled entirely with CSS by CodePen user Chris Mounsey.

  • Based on a Dribbble work by Subash Dharel, CodePen’s Sara Soueidan has created this stylish set of boxes intended to be used to display testimonials, including pictures and a box for quoted text. The widget can contain multiple testimonials, thanks to smooth CSS transitions.

  • A classy slider created and animated with pure CSS. It includes next and previous buttons (which come with neat transparencies) plus navigation dots. A fade/zoom out transition gives a styling touch to the project. All credit goes to CodePen user Avi Kohn.

Leave a comment

This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator