Pure CSS Slides is a fully-featured rendering system, using only HTML and CSS. This HTML5 presentation template is for CSS presentation only, fully responsive, print-ready, and switches slides with a cool rotating effect.
Must Read: How to Make Instagram Slideshow with JavaScript | slide-stories
Automatic Presentation Rotate Slides Animation Details
Post Name | Automatic Image Slider in HTML CSS |
Author Name | ondras |
Category | CSS & CSS3, HTML & HTML5, Slider |
Official Page | Click Here |
Official Website | github.com |
Publish Date | October 24, 2020 |
Last Update | July 1, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. Load the mandatory CSS information within the HTML.
<link rel="stylesheet" href="css/common.css" media="all" /> <link rel="stylesheet" href="css/screen.css" media="screen" /> <link rel="stylesheet" href="css/print.css" media="print" />
2. add slides to the presentation as follows:
<section id="slide1"> <h2>CSS Only Presentation</h2> <a class="next" href="#slide2"></a> <span id="hint">Click to continue ↑</span> <ul> <li>CSS</li> <li>WCF</li> <li>Code</li> </ul> </section> <section id="slide2"> <h2>Slide 2</h2> <a class="prev" href="#slide1"></a> <a class="next" href="#slide3"></a> Slide 2 Content </section> <section id="slide3"> <h2>Slide 3</h2> <a class="prev" href="#slide2"></a> <a class="next" href="#slide4"></a> Slide 3 Content </section> <section id="slide4"> <h2>Slide 4</h2> <a class="prev" href="#slide3"></a> <a class="next" href="#slide5"></a> Slide 4 Content </section> <section id="slide5"> <h2>Slide 5</h2> <a class="prev" href="#slide4"></a> Slide 5 Content <p><a id="reset" href="#">Reset?</a></p> </section> <section id="start"> <a href="#slide1">Click here to start the presentation…</a> </section> <aside id="time"></aside>
See Demo And Download
Official Website(ondras): Click Here
This superior jQuery/javascript plugin is developed by ondras. For extra Advanced Usages, please go to the official website.