Get hand-picked CSS slideshow collections. Demos and Tutorial links are available.
1) Slideshow Owl Carousel + YouTube
![40 CSS Slideshows 1 Slideshow Owl Carousel + YouTube](https://3.bp.blogspot.com/-de81N6MCUBk/XK38nTF4OJI/AAAAAAAAD3I/RFvFdpKLN48usFsrXSnIl58A-Ay1TcfgQCLcBGAs/s800/slideshow-owl-carousel-youtube.png)
Slideshow Owl Carousel + YouTube
Pierre Vion
SEPTEMBER 14, 2015
HTML, CSS and JavaScript
2) Responsive Multi-image Slideshow
![40 CSS Slideshows 2 Responsive Multi-image Slideshow](https://1.bp.blogspot.com/-kEO6FrBed4w/XK37ZsjnllI/AAAAAAAAD28/g3ZOi-Jtq8gjcNMKLcehfv_95ZAl1Q13ACLcBGAs/s800/responsive-multi-image-slideshow.gif)
A slideshow with multiple images per slide that split into individual slides on mobile, and merge back on tablet or desktop. It also utilizes the picture element for responsive images that change to portrait proportions on mobile. Adapted from slick.js.
3) Responsive Vanilla JS Slideshow
![40 CSS Slideshows 3 Responsive Vanilla JS Slideshow](https://2.bp.blogspot.com/-5XRR5sfWw5s/XK344hhjjVI/AAAAAAAAD2w/C_pZ5ozunBUfzZzR8O-qd2Ede6giy1E1wCLcBGAs/s800/responsive-vanilla-js-slideshow.png)
A simple responsive Vanilla JS slideshow with different forms of navigation.
4) Slideshow 3d showcase
![40 CSS Slideshows 4 Slideshow 3d showcase](https://2.bp.blogspot.com/-ndftQ67kbpI/XK33AyPaeQI/AAAAAAAAD2k/mJ8pTxPHYhA6P2_q9gJdiT4AGYphim1nwCLcBGAs/s800/slideshow-3d-showcase.gif)
Simple slideshow using css3 transforms 3d to showcase website layouts or anything else you want.
Jerome Renders
DECEMBER 30, 2015
HTML, CSS and JavaScript
5) Slideshow presentation
![40 CSS Slideshows 5 Slideshow presentation](https://2.bp.blogspot.com/-mXR4OzyhwMg/XK31o_nHM5I/AAAAAAAAD2Y/-HH3-d9c7H8yKzXIpGoFA19d0rJeESrUgCLcBGAs/s800/slideshow-presentation.gif)
Navigate using the up and down arrow keys.
Something Strange
MARCH 09, 2016
HTML, CSS and JavaScript
6) Split-screen Slideshow
![40 CSS Slideshows 6 Split-screen Slideshow](https://4.bp.blogspot.com/-dYmIhqmSeuo/XK30VM3nKRI/AAAAAAAAD2M/txOlNawkC0MUnSMZrQps2eHUg2jkCxQRQCLcBGAs/s800/split-screen-slideshow.png)
Split-screen Slideshow
7) Pure CSS Slideshow Gallery
![40 CSS Slideshows 7 Pure CSS Slideshow Gallery](https://2.bp.blogspot.com/-I5IqQIJXnBk/XK3wEgsnLHI/AAAAAAAAD2A/vUUsTS_XVl4EWMU0d2RdeOuYyVMKGR6ngCLcBGAs/s800/pure-css-slideshow-gallery.gif)
Responsive slide gallery Navigation and PREV-NEXT buttons created and nothing but CSS
8) Geometrical Birds – slideshow
![40 CSS Slideshows 8 Geometrical Birds - slideshow](https://1.bp.blogspot.com/-fqyzNgJGujU/XK3qGziip9I/AAAAAAAAD10/JfyasV1EAFMj3iI7azZHsJtnRYHbRUbqgCLcBGAs/s800/geometrical-birds-slideshow.gif)
83 triangles morphing and changing color into different birds. Polygonal birds Free Vector in Animals by freepik.com
Mikael Ainalem
OCTOBER 09, 2017
HTML, CSS and JavaScript
9) Parallax Slideshow
![40 CSS Slideshows 9 Parallax Slideshow](https://1.bp.blogspot.com/-Cxei9kyv8SA/XK3mdds7d2I/AAAAAAAAD1o/GgavhoigQUgYrfyJ2BzQIUnDRxnuiAQfwCLcBGAs/s1200/parallax-slideshow.png)
Parallax Slideshow with arrow and auto slideshow
Bruno Carvalho
DECEMBER 04, 2017
HTML, CSS and JavaScript
10) Bubble Slideshow Component
![40 CSS Slideshows 10 Bubble Slideshow Component](https://1.bp.blogspot.com/-oMPSaxcOeqA/XK3iSQWfSmI/AAAAAAAAD1c/092iUNvlp6MtfhvCLwee5nxMCDGR-odgACLcBGAs/s800/bubble-slideshow-component.jpg)
This is a Vue component that uses clip-path for an interesting slideshow transition effect.
11) Silhouette zoom slideshow
![40 CSS Slideshows 11 Silhouette zoom slideshow](https://2.bp.blogspot.com/-uUiHI598lBQ/XKYrUK4aD5I/AAAAAAAAD1Q/HZxW0q7dVQguXxrQTG71wHCBN8BEPx1TQCLcBGAs/s1200/silhouette-zoom-slideshow.png)
Slide show where the person in the current frame is used to zoom into the next frame
Mikael Ainalem
JANUARY 15, 2018
HTML, CSS and JavaScript
12) Responsive slideshow with Tabs
![40 CSS Slideshows 12 Slideshow with Tabs](https://4.bp.blogspot.com/-kxIUavXm9hI/XKYY1ZmK9wI/AAAAAAAAD1E/TgCUYBsOJuYDWB5DNnP72T2UzdDsp1xJACLcBGAs/s1200/responsive-slideshow-with-tabs.png)
A full-width, responsive and easy to customize slideshow.
13) Slideshow Parallax with TweenMax
![40 CSS Slideshows 13 Slideshow Parallax with TweenMax](https://2.bp.blogspot.com/-0KSR1r9CV-k/XKYXWHnTNvI/AAAAAAAAD04/O3nzUkLv1y80a26_wEQYpjUeq2wShv2gACLcBGAs/s1200/slideshow-parallax-with-tweenmax.gif)
Slideshow Parallax with TweenMax
Bruno Carvalho
APRIL 19, 2017
HTML, CSS and JavaScript
14) Fullscreen slideshow with menu
![40 CSS Slideshows 14 Fullscreen slideshow with menu](https://1.bp.blogspot.com/-mmMQj0PPAfg/XKYWJyE9ZAI/AAAAAAAAD0s/IuJkBMYC0PUfF-3HAcqECPPSGhAGZDhVgCLcBGAs/s1200/fullscreen-slideshow-with-menu.png)
Fullscreen slideshow with Slick Carousel with navigation buttons and burger menu.
Hitz Kareaga
JANUARY 26, 2016
HTML, CSS and JavaScript
15) Simple Image Slider
![40 CSS Slideshows 15 Simple Image Slider](https://1.bp.blogspot.com/-9f356BiSHL8/XKUVK0Pdd5I/AAAAAAAAD0c/w7guJf1_9zECIJqJjWV6mjEyuxfabjtyQCLcBGAs/s1200/simple-image-slider.gif)
A simple JQuery image slider! Features: – Automatic slideshow – Pause on hover – Dynamic slide counter – Show/Hide controls on hover
André Cortellini
AUGUST 14, 2014
HTML, CSS and JavaScript
16) Automatic infinite slideshow with jQuery
![40 CSS Slideshows 16 Automatic infinite slideshow with jQuery](https://2.bp.blogspot.com/-PoyOyp3p_7U/XKUTgc_VIhI/AAAAAAAAD0Q/dyGskEjKNF4jgqNVsWagqnTFBKN-y_5lwCLcBGAs/s1200/automatic-infinite-slideshow-with-jquery.png)
An automatic infinite slideshow made with 4 lines of jQuery.
Geoffrey Crofte
DECEMBER 03, 2014
HTML, CSS and JavaScript
17) Cycle Slideshow Slider
![40 CSS Slideshows 17 Cycle Slideshow Slider](https://4.bp.blogspot.com/-JNddYkCwqSo/XKUSgnYomHI/AAAAAAAAD0I/EvpdYn2kwZgJnSMiCFL1B7NZgVHRNbcWACLcBGAs/s1200/cycle-slideshow-slider.png)
Cycle Slideshow Slider build on top of Cycle2 jQuery plugin. Declarative nature of plugin is very convenient (custom data-attributes).
18) SlideShow Animated
![40 CSS Slideshows 18 SlideShow Animated](https://2.bp.blogspot.com/--WVQKXYZsho/XKUQ2m-5hrI/AAAAAAAADz8/5NBYU_8k2y8hYp13av9Fgopl0eNvV6CpwCLcBGAs/s1200/slideshow-animated.png)
SlideShow using javascript and css .
19) Slideshow in a button
![40 CSS Slideshows 19 Slideshow in a button](https://3.bp.blogspot.com/-h5qCjt6hf48/XKUNdsRqkvI/AAAAAAAADzw/iMxsiCPRxbw1XhX4cNq2Ro638TTJSNjggCLcBGAs/s1200/slideshow-in-a-button.png)
Slideshow in a button. Uses some heavy css3, some light jQuery and some messy html. It works fine in desktop browsers
Martyn Knapton
DECEMBER 27, 2013
HTML, CSS and JavaScript
20) Mobile First Product Slideshow Widget
![40 CSS Slideshows 20 Mobile First Product Slideshow Widget](https://4.bp.blogspot.com/-hDBVjusWvds/XKPDTtu-JgI/AAAAAAAADzk/dxUh2cri0xQTONF4gfspUBaYnymFPlEBACLcBGAs/s1200/mobile-first-product-slideshow-widget.gif)
Built with Mike Alsup’s (malsup) Cycle2 plugin for jQuery, this experiment features a mobile first product slideshow with some neat typography.
21) Table Cell Slideshow
![40 CSS Slideshows 21 Table Cell Slideshow](https://2.bp.blogspot.com/-d-fzWWNTNNk/XKPCLiodTcI/AAAAAAAADzY/neirYksCarYbZ19o8DO677KBDULxokTpwCLcBGAs/s1200/table-cell-slideshow.png)
Creating a slideshow with fancy effects based on table cell.
Jon Christensen
FEBRUARY 27, 2013
HTML, CSS and JavaScript
22) Slideshow CSS with image preview
![40 CSS Slideshows 22 Slideshow CSS with image preview](https://2.bp.blogspot.com/-hUzWb3ASKd8/XKPAnfnboEI/AAAAAAAADzM/E8YyvPJRtVIlmRju6UmoPFd5Sr1DpRkjwCLcBGAs/s1200/slideshow-css-with-image-preview.png)
here a full Css slideshow w/out js
23) Basic HTML Slideshow
![40 CSS Slideshows 23 Basic HTML Slideshow](https://1.bp.blogspot.com/-75pWqmRo-SQ/XKO_CVtE0rI/AAAAAAAADy8/iUvhlghFnXgi093Cx1mnGgX00_Zj7guPwCLcBGAs/s1200/basic-html-slideshow.gif)
Making a slideshow I can use for presentations using HTML, CSS and JavaScript
Tommy Hodgins
JANUARY 20, 2016
HTML, CSS and JavaScript
24) Slideshow Concept (No JS)
![40 CSS Slideshows 24 Slideshow Concept (No JS)](https://3.bp.blogspot.com/-u2v93PJbPLo/XKO-GJEv_hI/AAAAAAAADy0/ZeRf98RkVjASu_ctNgaXssYyDcDiVl5EgCLcBGAs/s1200/slideshow-concept-no-js.gif)
CSS and HTML Only Slideshow Concept
25) Responsive Slideshow Concept
![40 CSS Slideshows 25 Responsive Slideshow Concept](https://2.bp.blogspot.com/-hLLJLcqbF90/XKO9GWGJ81I/AAAAAAAADys/sbzSQLW8pSYvXqlduYgAc0qDqLR0mDxlACLcBGAs/s1200/responsive-slideshow-concept.gif)
This concept for a responsive slideshow was built with Mike Alsup’s Cycle2 plugin for jQuery. The thumbnails are dynamically generated using a little DOM traversal!
26) CSS Infinite Slideshow
![40 CSS Slideshows 26 CSS Infinite Slideshow](https://2.bp.blogspot.com/-8Sj93DIBDq8/XKO7-8wONnI/AAAAAAAADyg/0h-f1HGE44MHDEkFrO1JCJpwG2Ryi9SMACLcBGAs/s1200/css-infinite-slideshow.gif)
CSS Infinite Slideshow
27) ScrollMagic Tutorial – Fullscreen Slideshow
![40 CSS Slideshows 27 ScrollMagic Tutorial – Fullscreen Slideshow](https://4.bp.blogspot.com/-FV8z851Tu2Y/XKO61idIcAI/AAAAAAAADyU/eN-DjIT3MU0tsDfWQSatVEyhrkFD_XI4QCLcBGAs/s1200/scrollmagic-tutorial-fullscreen-slideshow.gif)
Learn how to use ScrollMagic’s triggerHook, triggerElement, setPin, addIndicators and setClassToggle.
28) Vanilla JS Lightbox Slideshow
![40 CSS Slideshows 28 Vanilla JS Lightbox Slideshow](https://4.bp.blogspot.com/-Qg4kLqlKq8I/XKO5XCgIWNI/AAAAAAAADyI/g6TugGpEjCMjeF4VeutUS-Bve6nqtan2QCLcBGAs/s1200/vanilla-js-lightbox-slideshow.png)
A simple vanilla js lightbox slideshow script
29) CSS Slideshow text
![40 CSS Slideshows 29 CSS Slideshow text](https://3.bp.blogspot.com/-d736T99Rs-Y/XKO2fKuK8mI/AAAAAAAADxw/3CduRq5TUNEI080M_fQNPO5VRpjmpe0UACLcBGAs/s1200/css-slideshow-text.gif)
CSS Slideshow text
30) CSS3 Slideshow with Image Panning and zooming Effect
![40 CSS Slideshows 30 CSS3 Slideshow with Image Panning and zooming Effect](https://4.bp.blogspot.com/-koStNapYM3E/XKO1cJdwwNI/AAAAAAAADxo/uetzk4YEq3EGIatm1Dk-8wnUYGv8vvnVQCLcBGAs/s1200/css3-slideshow-with-image-panning-and-zooming-effect.png)
CSS3 Slideshow with Image Panning and zooming Effect
31) Greensock animated slideshow
![40 CSS Slideshows 31 Greensock animated slideshow](https://4.bp.blogspot.com/-JNRbJt6M53s/XKOzeeHAjNI/AAAAAAAADxc/8OK10CUf3FQ8fVIMIRIau6EQNy-vucslACLcBGAs/s1200/greensock-animated-slideshow.png)
A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax. This is work in progress, currently working on how to best pevent the slidein animations from firing when users click the next/prev button repeatedly.
32) Automatic / Manual Slideshow
![40 CSS Slideshows 32 Automatic / Manual Slideshow](https://2.bp.blogspot.com/-9_5ZwuFh4Go/XKOxux3WlzI/AAAAAAAADxQ/c6djlEA4qiwFTtoqJfYAMMajENFaL43rQCLcBGAs/s1200/automatic-manual-slideshow.png)
Automatic Jquery Slideshow that switch to manual when you hit the arrows.
33) Fading Slideshow
![40 CSS Slideshows 33 Fading Slideshow](https://4.bp.blogspot.com/-hhXURcr2Lb0/XKOwlJKEBlI/AAAAAAAADxE/u8LIXT7kcCkRrbKKuQwD2f5rMhis-3pqgCLcBGAs/s1200/fading-slideshow.gif)
A slideshow that fades on the transition.
34) Slick Slideshow with blur effect
![40 CSS Slideshows 34 Slick Slideshow with blur effect](https://2.bp.blogspot.com/-cEmn-dc70SM/XKOvirEZ1GI/AAAAAAAADw8/JG0YWnvU7dMC0cKs0gk23zomOJOXzxD2wCLcBGAs/s1200/slick-slideshow-with-blur-effect.png)
Slick Slideshow with blur effect
Fabio Ottaviani
JANUARY 19, 2016
HTML, CSS and JavaScript
35) Fullscreen CSS Background Image Slideshow
![40 CSS Slideshows 35 Fullscreen CSS Background Image Slideshow](https://2.bp.blogspot.com/-Ky5QqZ6N0zM/XKOuRUS17WI/AAAAAAAADww/X1DGZSDSCFQCo9Mhzqwb5ofB0-hAd6ZMACLcBGAs/s1200/fullscreen-css-background-image-slideshow.png)
Taking advantage of Sass with Bourbon, and refactored the original Codrops demo of a Fullscreen Background Image Slideshow to be a little more compact and efficiently managed.
The markup for the slideshow is an unordered list that houses spans which will function as the elements for the background images of the slideshow.
A variable, $animation-delay, is defined as the duration of each slide. This variable will be used to calculate the slideshow’s cycle, and makes adding and removing slides a little more manageable.
The first instance of the variable is found tied to the spans that define the background images for each slide. Here, the variable should be multiplied by the total number of slides in the slideshow to set the full length of the cycle.
Where the background images for each span of the slideshow are defined, the variable is further used to set the delay for each slide and ensure that a continuous cycle is created.
Keyframe steps also need to be calculated based on the total number of slides and slide duration. First, divide slide duration by the total cycle time. The resulting percentage will be the base step, and where in the animation the image will begin to fade. An ‘in-between’ step is also needed preceding the base step, and is calculated by dividing the base step percentage by 2. This step is where the image will be completely shown. Finally, the step at which the image is to disappear completely will be following the base step, and is calculated by multiplying the base step by 1.5.
36) Dual Slideshow Demo
![40 CSS Slideshows 36 Dual Slideshow Demo](https://1.bp.blogspot.com/-NaZPsgKNbUs/XKOsWjsb55I/AAAAAAAADwc/7ezaremj54ATAcBoSvQ077GTsOvbqYgvACLcBGAs/s1200/dual-slideshow-demo.gif)
Just playing around with a dual pane slideshow concept.
Jacob Davidson
APRIL 17, 2015
HTML, CSS and JavaScript
37) A better simple slideshow
![40 CSS Slideshows 37 A better simple slideshow](https://1.bp.blogspot.com/-j2-dZeU1xL8/XKOrIN_RXVI/AAAAAAAADwQ/Y2Ljjzo7CqQ6Up_-lJCZGrhMHWrgvMQ7wCLcBGAs/s1200/a-better-simple-slideshow.png)
This is fairly basic slideshow, written in javascript, html, and css. This is a dual-purpose project, it’s meant (1) to be something you can drop right into your page and use if you so choose, but it’s also meant (2) as an example/tutorial showing you how to build a simple DIY slideshow from scratch on your own.
38) Scroll Down Slideshow
![40 CSS Slideshows 38 Scroll Down Slideshow](https://4.bp.blogspot.com/-x7fKZEqwaMM/XKOpfZZ-q8I/AAAAAAAADv8/U2VXlKxGyI0eZc7o2njvUI8IdVKA9N7GgCLcBGAs/s1200/scroll-down-slideshow.png)
The essential of it could be made using html/css only but the css attr function doesn’t support custom datatypes currently, to use it as an url. This slideshow supports permalinks with anchors. Basic keyboard support (left and right arrow keys).
39) Slideshow using CSS only
![40 CSS Slideshows 39 A simple slideshow made in css only](https://2.bp.blogspot.com/-61f-GwCXYGU/XKOnUapUoTI/AAAAAAAADvo/sm5K0xun_pg3coxCU0aJNZTCvKOI-9NKgCLcBGAs/s1200/slideshow-using-css-only.gif)
A simple slideshow made in css only
40) Split Slick Slideshow
![40 CSS Slideshows 40 Split Slick Slideshow](https://1.bp.blogspot.com/-8tkgawy_BsI/XKO3r1FYvXI/AAAAAAAADx8/5cNnaVlA6po7kJz4fi1i2x7ElJmYSVkZACLcBGAs/s1200/split-slick-slideshow.png)
Vertical slideshow in split screen
Fabio Ottaviani
MARCH 24, 2017
HTML, CSS and JavaScript
Leave a Reply