presentation page html template

Create beautiful stories

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

WebSlides 1.5.0 Github

Why WebSlides?

Good karma & Productivity.

An opportunity to engage.

WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

Work better, faster.

Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast .

→ Simple Navigation

Slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides demos.

Contribute on Github . View all ›

If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:

• Components · Classes .
• WebSlides on Codepen .
• WebSlides Media: images, videos...

Built to expand

The best way to inspire with your content is to connect on a personal level:

• Background images: Unsplash .
• CSS animations: Animate.css .
• Longforms: Animate on scroll .

Ready to Start?

Create your own stories instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

@jlantunez , @ant_laguna , and @luissacristan .

25+ CSS Slideshows

Slideshows are a popular way of presenting images, videos, or other content on a web page. They can be used for various purposes, such as showcasing a portfolio, displaying testimonials, highlighting products, or telling a story . Slideshows can also enhance the visual appeal and interactivity of a web page, as they can include animations, transitions, effects, and user controls .

However, creating a slideshow from scratch can be challenging and time-consuming, especially if you want to make it responsive, accessible, and compatible with different browsers and devices. Fortunately, there are many free and open-source CSS slideshow code examples that you can use as a starting point or inspiration for your own projects. These examples demonstrate the power and versatility of CSS, as they can create stunning slideshows with minimal HTML and JavaScript.

In this article, we will showcase some of the most creative and beautiful CSS slideshow code examples from CodePen, GitHub , and other resources. We will also provide a brief description of each example, as well as the link to the source code and the live demo. These examples are updated as of November 2021 collection, and include 4 new items .

Related Articles

• jQuery Slideshows
• Ryan Mulligan
• January 24, 2020
• demo and code
• HTML / CSS (SCSS)

About a code

Doggie screensaver.

Pretty hacky attempt at recreating the floating screensaver for the photo gallery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

• December 5, 2019

CSS Slideshow

• Riley Adair
• January 1, 2018
• JavaScript/Babel

About the code

Slideshow vanilla js.

Custom slideshow with staggered transitions. Built in vanilla JS.

• Nathan Taylor
• December 16, 2017

Untitled Slider

A small experiment which quickly turned into something more.

• Bruno Carvalho
• December 5, 2017
• JavaScript/Babel (jQuery.js)

Parallax Slideshow

HTML, CSS and JS slideshow with parallax effect.

Split Slick Slideshow

Vertical slideshow in split screen. Made by Fabio Ottaviani March 29, 2017

Slideshow Presentation

Navigate using the up and down arrow keys. Made by Keith Driessen March 9, 2016

Dual Slideshow

Just playing around with a dual pane slideshow concept. Made by Jacob Davidson April 17, 2015

A Pure CSS3 Slideshow

The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath. Made by Stathis October 3, 2013

• Johan Lagerqvist
• December 24, 2018

CSS-only Slideshow

An idea for a page header slideshow.

• November 30, 2018

Rotating Background Image Slideshow

• VERDIEU Steeve
• November 18, 2018

Slideshow with HTML/CSS

Slideshow made with HTML/CSS. Any javascript code is used.

Responsive: no

• Jefferson Lam
• October 8, 2018

Spooky Scary Clip Text

Spooky CSS only image slideshow with text clipping.

Compatible browsers: Chrome, Firefox, Opera, Safari

• Peter Butcher
• July 1, 2018

Slideshow Concept

A pure CSS and HTML slideshow concept. To add or remove slides: 1. add a new slide template in the HTML; 2. update the $slide-count SCSS variable; 3. tab colours: update the $c-slides SCSS variable 4. slide popout images: update the $b-slides SCSS variable. Use the tabs below to change slide.

• Mikael Ainalem
• January 15, 2018
• HTML + SVG / CSS / JavaScript

Silhouette Zoom Slideshow

Slide show where the person in the current frame is used to zoom into the next frame.

• October 17, 2017
• JavaScript (anime.js)

Geometrical Birds - Slideshow

83 triangles morphing and changing color into different birds.

• June 17, 2017
• CSS/PostCSS
• JavaScript (Vue.js)

Bubble Slideshow Component

This is a Vue component that uses clip-path for an interesting slideshow transition effect.

• April 19, 2017
• JavaScript (jQuery.js, TweenMax.js)

Slideshow Parallax

Slideshow Parallax with TweenMax.js

Split-Screen Slideshow

HTML, CSS and JavaScript split-screen slideshow. Made by Sean Free January 9, 2017

Only CSS Slideshow Effect

Ken Burns slideshow effect CSS only. Made by Dima December 12, 2016

Slick Slideshow With Blur Effect

Slideshow with blur effect in HTML, CSS and JavaScript. Made by Fabio Ottaviani November 11, 2016

CSS Fadeshow

This is an extended version of pure CSS slideshow gallery http://codepen.io/alexerlandsson/pen/RaZdox which comes with more and easier customisation and previous/next buttons. Made by Alexander Erlandsson October 24, 2016

• Just another Chris
• October 21, 2016
• HTML (Pug) / CSS (SCSS)

3-D Split Image Slideshow

TweenMax Slideshow

A customizable slideshow TweenMax. Made by Matheus Verissimo August 28, 2016

Nautilus Slideshow

Nautilus slideshow with HTML, CSS and JavaScript. Made by Nikolas Payne March 9, 2016