Automatic Presentation Rotate Slides Animation Using Only HTML CSS


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 that switches slide with a cool rotating effect.

automatic image slider javascript, slideshow javascript, image slider in javascript source code, automatic image slider in html css, automatic multiple image slider in html css

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 &uarr;</span>
<section id="slide2">
  <h2>Slide 2</h2>
  <a class="prev" href="#slide1"></a>
  <a class="next" href="#slide3"></a>
  Slide 2 Content
<section id="slide3">
  <h2>Slide 3</h2>
  <a class="prev" href="#slide2"></a>
  <a class="next" href="#slide4"></a>
  Slide 3 Content
<section id="slide4">
  <h2>Slide 4</h2>
  <a class="prev" href="#slide3"></a>
  <a class="next" href="#slide5"></a>
  Slide 4 Content
<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 id="start">
  <a href="#slide1">Click here to start the presentation&hellip;</a>
<aside id="time"></aside>

Pure CSS Presentation With Rotate Animation, pure css slides Plugin/Github, image carousel html, slideshow in html, how to make slider in html and css


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.