10+ CSS Slideshow Examples

This post contains a total of 10+ Hand-Picked CSS Slideshow Examples with Source Code. All these Slideshows are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Slideshow Examples

1. By VERDIEU Steeve

Made by VERDIEU Steeve. Simple Slideshow with html & CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  background-color: #3c3c3c;
}


.card {
  position: relative;
  
  width: 700px;
  height: 400px;
  overflow: hidden;

  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/*Light blue cover above the slide show*/
.card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 900;

  display: block;
  width: 100%;
  height: 100%;

  background-color: rgba(140, 22, 115, 0.2);
}

.card_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;

  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  
  transform: translateX( 700px );
  background-image: url( https://github.com/Flat-Pixels/assets_hosting/blob/master/picture_slides/1.jpg?raw=true );
  
  -webkit-animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
  
          animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
}


.card_part.card_part-two {
  z-index: 6;
  background-image: url( https://github.com/Flat-Pixels/assets_hosting/blob/master/picture_slides/2.jpg?raw=true );
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}

.card_part.card_part-three {
  z-index: 5;
  background-image: url( https://github.com/Flat-Pixels/assets_hosting/blob/master/picture_slides/3.jpg?raw=true );
  -webkit-animation-delay: 14s;
          animation-delay: 14s;
}

.card_part.card_part-four {
  z-index: 4;
  background-image: url( https://github.com/Flat-Pixels/assets_hosting/blob/master/picture_slides/4.jpg?raw=true );
  -webkit-animation-delay: 21s;
          animation-delay: 21s;
}


@-webkit-keyframes opaqTransition {
  3% { transform: translateX( 0 ); }
  25% { transform: translateX( 0 ); }
  28% { transform: translateX( -700px ); }
  100% { transform: translateX( -700px ); }
}


@keyframes opaqTransition {
  3% { transform: translateX( 0 ); }
  25% { transform: translateX( 0 ); }
  28% { transform: translateX( -700px ); }
  100% { transform: translateX( -700px ); }
}
</style>
</head>
<body>
  <div class="card">
  
  <div class="card_part card_part-one">
  </div>
  
   <!-- Photo 2 -->
  <div class="card_part card_part-two">

  </div>

  <!-- Photo 3 -->
  <div class="card_part card_part-three">
  </div>

  <!-- Photo 4 -->
  <div class="card_part card_part-four">
  </div>

</div>
</body>
</html>
 

2. By Alex Man

Made by Alex Man. Slideshow with Fade effect and Text. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body, h1, ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.red {
      color: #F16B6F;
    }
.logo {
  position: fixed;
  background-color: #333;
  color: #eee;
  left: 0;
  top: 0;
  z-index: 1200;
  padding: 10px;
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}

.bg-slideshow,
.bg-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.bg-slideshow:after {
    content: '';
    background: transparent url('http://watchmaker.haz.wiki/_media/tips:stripes.png') repeat top left;
    /*background: transparent url('http://erinsowards.com/articles/2012/07/graphics/bkg_patterns_08.gif') repeat top left;*/
}
.bg-slideshow li .image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-animation: imageAnimation 18s linear infinite 0s;
            animation: imageAnimation 18s linear infinite 0s;
}
.bg-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 18s linear infinite 0s;
            animation: titleAnimation 18s linear infinite 0s;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
}
.bg-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
}
.bg-slideshow li:nth-child(1) .image {
    background-image: url('http://s2.favim.com/orig/34/beautiful-black-and-white-fashion-girl-relax-Favim.com-278194.jpg')
}
.bg-slideshow li:nth-child(2) .image {
    background-image: url('https://s-media-cache-ak0.pinimg.com/736x/d4/9e/0d/d49e0d2e93f5cb76994e25656545f5cd.jpg');
    -webkit-animation-delay: 6s;
            animation-delay: 6s;
}
.bg-slideshow li:nth-child(3) .image {
    background-image: url('http://cliparts.co/cliparts/dT9/rbo/dT9rbox.jpg');
    -webkit-animation-delay: 12s;
            animation-delay: 12s;
}
.bg-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
            animation-delay: 6s;
}
.bg-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
            animation-delay: 12s;
}
@-webkit-keyframes imageAnimation {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
    8% { opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    27% { opacity: 1 }
    45% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
    8% { opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    27% { opacity: 1 }
    45% { opacity: 0 }
    100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
  0% { opacity: 0; }
  8% { opacity: 1; }
  27% { opacity: 1 }
  45% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes titleAnimation {
  0% { opacity: 0; }
  8% { opacity: 1; }
  27% { opacity: 1 }
  45% { opacity: 0 }
  100% { opacity: 0 }
}
.no-cssanimations .cb-slideshow li .image{
	opacity: 1;
}
@media screen and (max-width: 1140px) {
    .bg-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
    .bg-slideshow li div h3 { font-size: 80px }
}
</style>
</head>
<body>
  <ul class="bg-slideshow">
 	<li>
		  <span class="image">Image 01</span>
		  <div>
			   <h3><span class="red">re</span>Β·lax</h3>
  		</div>
 	</li>
	<li>
    <span class="image">Image 02</span>
		  <div>
			   <h3>and <span class="red">go</span>..</h3>
  		</div>
  </li>
	<li>
    <span class="image">Image 03</span>
		  <div>
			   <h3>Yep<span class="red">This</span>Good</h3>
  		</div>
  </li>
</ul>
</body>
</html>

3. By Chris Coyier

Made by Chris Coyier. Infinite Slideshow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
.tech-slideshow {
  height: 200px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  height: 200px;
  width: 2526px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  -webkit-animation: moveSlideshow 12s linear infinite;
          animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  -webkit-animation: moveSlideshow 15s linear infinite;
          animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

@-webkit-keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}
</style>
</head>
<body>
  <div class="tech-slideshow">
  <div class="mover-1"></div>
  <div class="mover-2"></div>
</div>
</body>
</html>

4. By Justin Nicholes

Made by Justin Nicholes. Fluid CSS3 Slideshow with Parallax Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<style>
body {
  font-family: 'Open Sans Condensed', 'Arial Narrow', serif;
  font-weight: 400;
  font-size: 15px;
  color: #333;
  background: #cdc url("https://i.imgur.com/LtdNdBp.jpg") repeat top left;
}

.container {
  width: 100%;
  position: relative;
}

.container > .header {
  margin: 10px;
  padding: 20px 10px 10px 10px;
  position: relative;
  display: block;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  text-align: center;  
}

.container > .header h1 {
  font-size: 40px;
  line-height: 40px;
  margin: 0;
  position: relative;
  font-weight: 300;
  color: #707a8d;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}

.container > .header h1 span{
  font-weight: 700;
}

.container > .header h2 {
  font-size: 14px;
  font-weight: 300;
  margin: 0;
  padding: 15px 0 5px 0;
  color: #4d525d;
  font-family: Cambria, Georgia, serif;
  font-style: italic;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.9);  
}



.sp-slideshow {
  position: relative;
  margin: 10px auto;
  width: 80%;
  max-width: 1000px;
  min-width: 260px;
  height: 460px;
  border: 10px solid #ddd;
  border: 10px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.sp-content {
  background: #7d7f72 url("https://i.imgur.com/wO5gzQp.png") repeat scroll 0 0;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sp-parallax-bg {
  background: url('https://i.imgur.com/L6XmtEs.png') repeat-x scroll 0 0;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sp-slideshow input {
  position: absolute;
  bottom: 15px;
  left: 50%;
  width: 9px;
  height: 9px;
  z-index: 1001;
  cursor: pointer;
  opacity: 0;
}

.sp-slideshow input + label {
  position: absolute;
  bottom: 15px;
  left: 50%;
  width: 6px;
  height: 6px;
  display: block;
  z-index: 1000;
  border: 3px solid #fff;
  border: 3px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  transition: background-color linear 0.1s;
}

.sp-slideshow input:checked + label {
  background-color: #fff;
  background-color: rgba(255,255,255,0.9);
}

.sp-selector-1, .button-label-1 {
  margin-left: -36px;
}

.sp-selector-2, .button-label-2 {
  margin-left: -18px;
}
.sp-selector-4, .button-label-4 {
  margin-left: 18px;
}
.sp-selector-5, .button-label-5 {
  margin-left: 36px;
}

.sp-arrow {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 38px;
  margin-top: -19px;
  display: none;
  opacity: 0.8;
  cursor: pointer;
  z-index: 1000;
  background: transparent url('https://i.imgur.com/yeMfI0Q.png') no-repeat;
  transition: opacity linear 0.3s;
}

.sp-arrow: hover {
  opacity: 1;
}

.sp-arrow:active {
  margin-top: -18px;
}

.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
  right: 15px;
  display: block;
  background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
  left: 15px;
  display: block;
  background-position: top left;
}

.sp-slideshow input:checked ~ .sp-content {
  transition: background-position linear 0.6s, background-color linear 0.8s;
}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
  transition: background-position linear 0.7s;
}

input.sp-selector-1:checked ~ .sp-content {
  background-position: 0 0;
  background-color: #727b7f;
}

input.sp-selector-2:checked ~ .sp-content {
  background-position: -100px 0;
  background-color: #7f7276;
}

input.sp-selector-3:checked ~ .sp-content {
  background-position: -200px 0;
  background-color: #737f72;
}

input.sp-selector-4:checked ~ .sp-content {
  background-position: -300px 0;
  background-color: #79727f;
}

input.sp-selector-5:checked ~ .sp-content {
  background-position: -400px 0;
  background-color: #7d7f72;
}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
    background-position: 0 0;
}
 
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
    background-position: -200px 0;
}
 
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
    background-position: -400px 0;
}
 
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
    background-position: -600px 0;
}
 
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
    background-position: -800px 0;
}

.sp-slider {
  position: relative;
  left: 0;
  width: 500%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: left ease-in 0.8s;
}

.sp-slider > li {
  color: #fff;
  width: 20%;
  box-sizing: border-box;
  height: 100%;
  padding: 0 60px;
  float: left;
  text-align: center;
  opacity: 0.4;
  transition: opactiy ease-in 0.4s 0.8s;
}

.sp-slider > li img {
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
  padding: 40px 0 50px 0;
  max-height: 100%;
  max-width: 100%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}
 
input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}
 
input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}
 
input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}
 
input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
    opacity: 1;
}

.note {
  padding: 5px;
  text-align: center;
}
</style>
</head>
<body>
  <div class="container">
  <div class="header">
  <h1>Fluid CSS3 Slideshow <span>with Parallax Effect</span></h1>
  <h2>A CSS-only slideshow with some background parallax effect</h2>
</div>

<div class="sp-slideshow">
  
  <input type="radio" id="button-1" name="radio-set" class="sp-selector-1" checked="checked" />
  <label for="button-1" class="button-label-1"></label>
  
  <input type="radio" id="button-2" name="radio-set" class="sp-selector-2" />
  <label for="button-2" class="button-label-2"></label>
  
  <input type="radio" id="button-3" name="radio-set" class="sp-selector-3" />
  <label for="button-3" class="button-label-3"></label>
  
  <input type="radio" id="button-4" name="radio-set" class="sp-selector-4" />
  <label for="button-4" class="button-label-4"></label>
  
  <input type="radio" id="button-5" name="radio-set" class="sp-selector-5" />
  <label for="button-5" class="button-label-5"></label>
  
  <label for="button-1" class="sp-arrow sp-a1"></label>
  <label for="button-2" class="sp-arrow sp-a2"></label>
  <label for="button-3" class="sp-arrow sp-a3"></label>
  <label for="button-4" class="sp-arrow sp-a4"></label>
  <label for="button-5" class="sp-arrow sp-a5"></label>
  
  <div class="sp-content">
    <div class="sp-parallax-bg"></div>
    <ul class="sp-slider clearfix">
      <li><img src="https://i.imgur.com/CGymcFT.png" alt="image01" /></li>
      <li><img src="https://i.imgur.com/7JEcZCq.png" alt="image02" /></li>
      <li><img src="https://i.imgur.com/mbTjCW1.png" alt="image03" /></li>
      <li><img src="https://i.imgur.com/af56d4C.png" alt="image04" /></li>
      <li><img src="https://i.imgur.com/qVefFH7.png" alt="image05" /></li>
    </ul>
  </div><!-- sp-content -->
    
  
</div> <!-- sp-slideshow -->
  <p class="note">Code Example by Codrops: <a href="https://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/">Fluid CSS3 Slideshow with Parallax Effect</a></p>
  <p class="note"><a href="http://wegraphics.net/donloads/free-vector-infographic-kit/">Infograpic Elements from WeGraphics</a> &middot; <a href="#http://5milli.deviantart.com/art/Global-Map-Vector-100880703">Global Map Vector from 5Milli</a></p>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
</body>
</html>

5. By Trung Vo

Made by Trung Vo. Responsive Slideshow / Carousel. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<style>
@charset "UTF-8";
/*---- NUMBER OF SLIDE CONFIGURATION ----*/
.wrapper {
  max-width: 60em;
  margin: 1em auto;
  position: relative;
}

input {
  display: none;
}

.inner {
  width: 500%;
  line-height: 0;
}

article {
  width: 20%;
  float: left;
  position: relative;
}
article img {
  width: 100%;
}

/*---- SET UP CONTROL ----*/
.slider-prev-next-control {
  height: 50px;
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.slider-prev-next-control label {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.7;
}
.slider-prev-next-control label:hover {
  opacity: 1;
}

.slider-dot-control {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
}
.slider-dot-control label {
  cursor: pointer;
  border-radius: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #bbb;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.slider-dot-control label:hover {
  background: #ccc;
  border-color: #777;
}

/* Info Box */
.info {
  position: absolute;
  font-style: italic;
  line-height: 20px;
  opacity: 0;
  color: #000;
  text-align: left;
  -webkit-transition: all 1000ms ease-out 600ms;
  -moz-transition: all 1000ms ease-out 600ms;
  transition: all 1000ms ease-out 600ms;
}
.info h3 {
  color: #fcfff4;
  margin: 0 0 5px;
  font-weight: normal;
  font-size: 1.5em;
  font-style: normal;
}
.info.top-left {
  top: 30px;
  left: 30px;
}
.info.top-right {
  top: 30px;
  right: 30px;
}
.info.bottom-left {
  bottom: 30px;
  left: 30px;
}
.info.bottom-right {
  bottom: 30px;
  right: 30px;
}

/* Slider Styling */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 1px 1px 4px #666;
  background: #fff;
  background: #fcfff4;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.slider-wrapper .inner {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}

/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  margin: 0;
  line-height: 38px;
  font-size: 3em;
  display: block;
  color: #777;
}

#slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after {
  content: "ο„…";
  padding-left: 15px;
}

#slide5:checked ~ .slider-prev-next-control label:nth-child(1), #slide4:checked ~ .slider-prev-next-control label:nth-child(5), #slide3:checked ~ .slider-prev-next-control label:nth-child(4), #slide2:checked ~ .slider-prev-next-control label:nth-child(3), #slide1:checked ~ .slider-prev-next-control label:nth-child(2) {
  display: block;
  float: right;
  margin-right: 5px;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(5), #slide5:checked ~ .slider-prev-next-control label:nth-child(4), #slide4:checked ~ .slider-prev-next-control label:nth-child(3), #slide3:checked ~ .slider-prev-next-control label:nth-child(2), #slide2:checked ~ .slider-prev-next-control label:nth-child(1) {
  display: block;
  float: left;
  margin-left: 5px;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after {
  content: "ο„„";
  padding-left: 8px;
}

#slide5:checked ~ .slider-dot-control label:nth-child(5), #slide4:checked ~ .slider-dot-control label:nth-child(4), #slide3:checked ~ .slider-dot-control label:nth-child(3), #slide2:checked ~ .slider-dot-control label:nth-child(2), #slide1:checked ~ .slider-dot-control label:nth-child(1) {
  background: #333;
}

#slide5:checked ~ .slider-wrapper article:nth-child(5) .info, #slide4:checked ~ .slider-wrapper article:nth-child(4) .info, #slide3:checked ~ .slider-wrapper article:nth-child(3) .info, #slide2:checked ~ .slider-wrapper article:nth-child(2) .info, #slide1:checked ~ .slider-wrapper article:nth-child(1) .info {
  opacity: 1;
}

#slide1:checked ~ .slider-wrapper .inner {
  margin-left: 0%;
}
#slide2:checked ~ .slider-wrapper .inner {
  margin-left: -100%;
}
#slide3:checked ~ .slider-wrapper .inner {
  margin-left: -200%;
}
#slide4:checked ~ .slider-wrapper .inner {
  margin-left: -300%;
}
#slide5:checked ~ .slider-wrapper .inner {
  margin-left: -400%;
}
/*---- TABLET ----*/
@media only screen and (max-width: 850px) and (min-width: 450px) {
  .slider-wrapper {
    border-radius: 0;
  }
}
/*---- MOBILE----*/
@media only screen and (max-width: 450px) {
  .slider-wrapper {
    border-radius: 0;
  }

  .slider-wrapper .info {
    opacity: 0;
  }
}
@media only screen and (min-width: 850px) {
  body {
    padding: 0 80px;
  }
}
</style>
</head>
<body>
  <div class="wrapper">
  <input checked type=radio name="slider" id="slide1" />
  <input type=radio name="slider" id="slide2" />
  <input type=radio name="slider" id="slide3" />
  <input type=radio name="slider" id="slide4" />
  <input type=radio name="slider" id="slide5" />

  <div class="slider-wrapper">
    <div class=inner>
      <article>
        <div class="info top-left">
          <h3>Malacca</h3></div>
        <img src="https://farm9.staticflickr.com/8059/28286750501_dcc27b1332_h_d.jpg" />
      </article>

      <article>
        <div class="info bottom-right">
          <h3>Cameron Highland</h3></div>
        <img src="https://farm6.staticflickr.com/5812/23394215774_b76cd33a87_h_d.jpg" />
      </article>

      <article>
        <div class="info bottom-left">
          <h3>New Delhi</h3></div>
        <img src="https://farm8.staticflickr.com/7455/27879053992_ef3f41c4a0_h_d.jpg" />
      </article>

      <article>
        <div class="info top-right">
          <h3>Ladakh</h3></div>
        <img src="https://farm8.staticflickr.com/7367/27980898905_72d106e501_h_d.jpg" />
      </article>

      <article>
        <div class="info bottom-left">
          <h3>Nubra Valley</h3></div>
        <img src="https://farm8.staticflickr.com/7356/27980899895_9b6c394fec_h_d.jpg" />
      </article>
    </div>
    <!-- .inner -->
  </div>
  <!-- .slider-wrapper -->

  <div class="slider-prev-next-control">
    <label for=slide1></label>
    <label for=slide2></label>
    <label for=slide3></label>
    <label for=slide4></label>
    <label for=slide5></label>
  </div>
  <!-- .slider-prev-next-control -->

  <div class="slider-dot-control">
    <label for=slide1></label>
    <label for=slide2></label>
    <label for=slide3></label>
    <label for=slide4></label>
    <label for=slide5></label>
  </div>
  <!-- .slider-dot-control -->
</div>
</body>
</html>

6. By Jaskiran Chhokar

Made by Jaskiran Chhokar. 3D Rotating Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/* 3D Slideshow */ 
* {
	margin: 0;
	padding: 0;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: #6adecd;
}

#slideshow {
	margin: 0 auto;
	padding-top: 50px;
	height: 600px;
	width: 100%;
	background-color: #6adecd;
	box-sizing: border-box;
}

.slideshow-title {
	font-family: 'Allerta Stencil';
	font-size: 62px;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	margin-top: 25%;
	letter-spacing: 3px;
	font-weight: 300;
}

.sub-heading {
	padding-top: 50px;
	font-size: 18px;
} .sub-heading-two {
	font-size: 15px;
} .sub-heading-three {
	font-size: 13px;
} .sub-heading-four {
	font-size: 11px;
} .sub-heading-five {
	font-size: 9px;
} .sub-heading-six {
	font-size: 7px;
} .sub-heading-seven {
	font-size: 5px;
} .sub-heading-eight {
	font-size: 3px;
} .sub-heading-nine {
	font-size: 1px;
}

.entire-content {
	margin: auto;
	width: 190px;
	perspective: 1000px;
	position: relative;
	padding-top: 80px;
}

.content-carrousel {
	width: 100%;
	position: absolute;
	float: right;
	animation: rotar 15s infinite linear;
	transform-style: preserve-3d;
}

.content-carrousel:hover {
	animation-play-state: paused;
	cursor: pointer;
}

.content-carrousel figure {
	width: 100%;
	height: 120px;
	border: 1px solid #3b444b;
	overflow: hidden;
	position: absolute;
}

.content-carrousel figure:nth-child(1) {
	transform: rotateY(0deg) translateZ(300px); 
} .content-carrousel figure:nth-child(2) {
	transform: rotateY(40deg) translateZ(300px); 
} .content-carrousel figure:nth-child(3) {
	transform: rotateY(80deg) translateZ(300px); 
} .content-carrousel figure:nth-child(4) {
	transform: rotateY(120deg) translateZ(300px); 
} .content-carrousel figure:nth-child(5) {
	transform: rotateY(160deg) translateZ(300px); 
} .content-carrousel figure:nth-child(6) {
	transform: rotateY(200deg) translateZ(300px); 
} .content-carrousel figure:nth-child(7) {
	transform: rotateY(240deg) translateZ(300px); 
} .content-carrousel figure:nth-child(8) {
	transform: rotateY(280deg) translateZ(300px); 
} .content-carrousel figure:nth-child(9) {
	transform: rotateY(320deg) translateZ(300px); 
} .content-carrousel figure:nth-child(10) {
	transform: rotateY(360deg) translateZ(300px); 
} 

.shadow {
    position: absolute;
    box-shadow: 0px 0px 20px 0px #000;
    border-radius: 1px;
}

.content-carrousel img {
	image-rendering: auto;
	transition: all 300ms;
	width: 100%;
	height: 100%;
}

.content-carrousel img:hover {
	transform: scale(1.2);
	transition: all 300ms;
}

@keyframes rotar {
	from {
		transform: rotateY(0deg);
	} to {
		transform: rotateY(360deg);
	}
}
</style>
</head>
<body>
  <!-- 3D Slideshow Section --> 
<section id="slideshow">
			<div class="entire-content">
				<div class="content-carrousel">
					<figure class="shadow"><img src="https://images.pexels.com/photos/758733/pexels-photo-758733.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/21261/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/776653/pexels-photo-776653.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/131046/pexels-photo-131046.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/302515/pexels-photo-302515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/301682/pexels-photo-301682.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/933054/pexels-photo-933054.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"/></figure>
		</div>
	</div>
</section>
</body>
</html>

7. By Jen

Made by Jen. Image Slideshow with Fading effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
.slideshow {
  list-style-type: none;
}

/** SLIDESHOW **/
.slideshow,
.slideshow:after { 
    top: -16px; /*Not sure why I needed this fix*/
		position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    z-index: 0; 
}

.slideshow li span { 
		position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 30s linear infinite 0s; 
}



.slideshow li:nth-child(1) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg"); 
}
.slideshow li:nth-child(2) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9ecd82b40364fc97f4b_bridge.jpg");
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg");   
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
    animation-delay: 24s; 
}



@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}


@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}


.no-cssanimations .cb-slideshow li span {
	opacity: 1;
}
</style>
</head>
<body>
  <ul class="slideshow">
	<li><span></span></li>
  <li><span>2</span></li>
	<li><span></span></li>
	<li><span></span></li>
	<li><span></span></li>
</ul>
</body>
</html>

8. By Johan Lagerqvist

Made by Johan Lagerqvist. Simple Image Slideshow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/8.0.0/sanitize.min.css'>
<style>
.wrapper {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.slideshow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}
.slideshow--hero {
  z-index: 3;
  left: 0;
  top: 50%;
  height: 85%;
  transform: translateY(-50%) skewY(-10deg);
  transform-origin: center;
  overflow: hidden;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}
.slideshow--hero .slides {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100vw;
  height: 100vh;
  animation: 11s slideshow-hero-mobile -3s infinite;
}
.slideshow--hero .slide1 {
  background-image: url(https://source.unsplash.com/1000x750);
  animation: 20s slides-set-1 -0.1s infinite;
}
.slideshow--hero .slide2 {
  background-image: url(https://source.unsplash.com/1001x751);
  animation: 20s slides-set-2 -0.1s infinite;
}
.slideshow--hero .slide3 {
  background-image: url(https://source.unsplash.com/1002x752);
  animation: 20s slides-set-3 -0.1s infinite;
}
@media (min-width: 600px) {
  .slideshow--hero {
    left: 50%;
    top: 0;
    width: 67%;
    height: 100%;
    transform: translateX(-50%) skewX(-10deg);
  }
  .slideshow--hero .slides {
    top: 0;
    left: -25%;
    height: 100%;
    animation: 11s slideshow-hero -3s infinite;
  }
}
.slideshow--contrast {
  z-index: 1;
  width: 100%;
  height: 50%;
  transform: none;
}
.slideshow--contrast--before {
  left: 0;
}
.slideshow--contrast--before .slides {
  width: 100vw;
}
.slideshow--contrast--after {
  z-index: 2;
  left: auto;
  right: 0;
}
.slideshow--contrast--after .slides {
  width: 100vw;
  left: auto;
  right: 0;
}
.slideshow--contrast .slides {
  animation: 14s slideshow-contrast -5s infinite;
}
.slideshow--contrast .slide1 {
  background-image: linear-gradient(to bottom, rgba(200, 200, 75, 0.25) 0, rgba(200, 75, 75, 0.5) 100%), url(https://source.unsplash.com/1000x750);
  animation: 20s slides-set-1 -0.2s infinite;
}
.slideshow--contrast .slide2 {
  background-image: linear-gradient(to bottom, rgba(200, 200, 75, 0.25) 0, rgba(200, 75, 75, 0.5) 100%), url(https://source.unsplash.com/1001x751);
  animation: 20s slides-set-2 -0.2s infinite;
}
.slideshow--contrast .slide3 {
  background-image: linear-gradient(to bottom, rgba(200, 200, 75, 0.25) 0, rgba(200, 75, 75, 0.5) 100%), url(https://source.unsplash.com/1002x752);
  animation: 20s slides-set-3 -0.2s infinite;
}
.slideshow--contrast--after {
  top: auto;
  bottom: 0;
}
.slideshow--contrast--after .slides {
  animation: 13s slideshow-contrast -13s infinite;
}
.slideshow--contrast--after .slide {
  background-position: right;
}
.slideshow--contrast--after .slide1 {
  animation: 20s slides-set-1 infinite;
}
.slideshow--contrast--after .slide2 {
  animation: 20s slides-set-2 infinite;
}
.slideshow--contrast--after .slide3 {
  animation: 20s slides-set-3 infinite;
}
@media (min-width: 600px) {
  .slideshow--contrast {
    width: 50%;
    height: 100%;
  }
  .slideshow--contrast--after {
    top: 0;
    bottom: auto;
  }
  .slideshow--contrast--after .slides {
    width: 50vw;
  }
}

.slides,
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@keyframes slideshow-hero-mobile {
  0% {
    transform: scale(1) skewY(10deg);
  }
  50% {
    transform: scale(1.05) skewY(10deg);
  }
  100% {
    transform: scale(1) skewY(10deg);
  }
}
@keyframes slideshow-hero {
  0% {
    transform: scale(1) skewX(10deg);
  }
  50% {
    transform: scale(1.05) skewX(10deg);
  }
  100% {
    transform: scale(1) skewX(10deg);
  }
}
@keyframes slideshow-contrast {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}
@keyframes slides-set-1 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  31% {
    opacity: 1;
    transform: scale(1);
  }
  34% {
    opacity: 0;
    transform: scale(1.05);
  }
  97% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slides-set-2 {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  31% {
    opacity: 0;
    transform: scale(1.05);
  }
  34% {
    opacity: 1;
    transform: scale(1);
  }
  64% {
    opacity: 1;
    transform: scale(1);
  }
  67% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes slides-set-3 {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  64% {
    opacity: 0;
    transform: scale(1.05);
  }
  67% {
    opacity: 1;
    transform: scale(1);
  }
  97% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
</style>
</head>
<body>
  <div class="wrapper">
<div class="slideshows">
  <div class="slideshow slideshow--hero">
    <div class="slides">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
    </div>
  </div>
  <div class="slideshow slideshow--contrast slideshow--contrast--before">
    <div class="slides">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
    </div>
  </div>
  <div class="slideshow slideshow--contrast slideshow--contrast--after">
    <div class="slides">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
    </div>
  </div>
</div>
  </div>
</body>
</html>

9. By Isobel Lennox

Made by Isobel Lennox. Simple CSS3 Auto Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.container {
  background:#000;
  width:500px;
  margin: 0 auto;
  padding: 10px 10px 0 10px;
}

.slideshow_wrapper {
  width:500px;
  height:280px;
  overflow: hidden; 
}

.slideshow {
  width:1500px;
  height:280px;
  margin: 0 0 0 -1000px;
 position: relative;
  -webkit-animation-name: slide_animation;
  -webkit-animation-duration:10s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:alternate;
   -webkit-animation-play-state: running;
}

.slide {
  
  width:500px;
  height: 270px;
  position:relative;
  float:left;
  overflow:hidden;
  
}

.slideshow img{
  width:500px; height:270px;
}

@-webkit-keyframes slide_animation {
  
  0% {left:0px;}
  10% {left:500px;}
  20% {left:500px;}
  30% {left:500px;}
  40% {left:500px;}
  50% {left:500px;}
  60% {left:500px;}
  70% {left:1000px;}
  80% {left:1000px;}
  90% {left:1000px;}
  100% {left:1000px;}
  
  
}
</style>
</head>
<body>
  <div class="container">
  <div class="slideshow_wrapper">
    <div class="slideshow">
      <div class="slide_one slide">
        <img src="https://i1.ytimg.com/vi/hP9zimdPXtk/0.jpg" />
      </div>
      
      <div class="slide_two slide">
        <img src="https://i1.ytimg.com/vi/HiS1-l2xadg/mqdefault.jpg" />
      </div>
      
       <div class="slide_three slide">
        <img class="slide_img" src="https://i1.ytimg.com/vi/_di83KPJY3s/0.jpg" />
      </div>
    </div></div></div></div>
</body>
</html>
 

10. By Roko C. Buljan

Made by Roko C. Buljan. Pure CSS Slideshow Gallery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{box-sizing: border-box; -webkit-box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 16px/1.3 sans-serif; }

/*
PURE RESPONSIVE CSS3 SLIDESHOW GALLERY by Roko C. buljan
http://stackoverflow.com/a/34696029/383904
*/

.CSSgal {
	position: relative;
	overflow: hidden;
	height: 100%; /* Or set a fixed height */
}

/* SLIDER */

.CSSgal .slider {
	height: 100%;
	white-space: nowrap;
	font-size: 0;
	transition: 0.8s;
}

/* SLIDES */

.CSSgal .slider > * {
	font-size: 1rem;
	display: inline-block;
	white-space: normal;
	vertical-align: top;
	height: 100%;
	width: 100%;
	background: none 50% no-repeat;
	background-size: cover;
}

/* PREV/NEXT, CONTAINERS & ANCHORS */

.CSSgal .prevNext {
	position: absolute;
	z-index: 1;
	top: 50%;
	width: 100%;
	height: 0;
}

.CSSgal .prevNext > div+div {
	visibility: hidden; /* Hide all but first P/N container */
}

.CSSgal .prevNext a {
	background: #fff;
	position: absolute;
	width:       60px;
	height:      60px;
	line-height: 60px; /* If you want to place numbers */
	text-align: center;
	opacity: 0.7;
	-webkit-transition: 0.3s;
					transition: 0.3s;
	-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
	left: 0;
}
.CSSgal .prevNext a:hover {
	opacity: 1;
}
.CSSgal .prevNext a+a {
	left: auto;
	right: 0;
}

/* NAVIGATION */

.CSSgal .bullets {
	position: absolute;
	z-index: 2;
	bottom: 0;
	padding: 10px 0;
	width: 100%;
	text-align: center;
}
.CSSgal .bullets > a {
	display: inline-block;
	width:       30px;
	height:      30px;
	line-height: 30px;
	text-decoration: none;
	text-align: center;
	background: rgba(255, 255, 255, 1);
	-webkit-transition: 0.3s;
					transition: 0.3s;
}
.CSSgal .bullets > a+a {
	background: rgba(255, 255, 255, 0.5); /* Dim all but first */
}
.CSSgal .bullets > a:hover {
	background: rgba(255, 255, 255, 0.7) !important;
}

/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal >s:target ~ .bullets >* {      background: rgba(255, 255, 255, 0.5);}
/* ACTIVE */
#s1:target ~ .bullets >*:nth-child(1) {background: rgba(255, 255, 255,   1);}
#s2:target ~ .bullets >*:nth-child(2) {background: rgba(255, 255, 255,   1);}
#s3:target ~ .bullets >*:nth-child(3) {background: rgba(255, 255, 255,   1);}
#s4:target ~ .bullets >*:nth-child(4) {background: rgba(255, 255, 255,   1);}
/* More slides? Add here more rules */

/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal >s:target ~ .prevNext >* {      visibility: hidden;}
/* ACTIVE: */
#s1:target ~ .prevNext >*:nth-child(1) {visibility: visible;}
#s2:target ~ .prevNext >*:nth-child(2) {visibility: visible;}
#s3:target ~ .prevNext >*:nth-child(3) {visibility: visible;}
#s4:target ~ .prevNext >*:nth-child(4) {visibility: visible;}
/* More slides? Add here more rules */

/* SLIDER ANIMATION POSITIONS */

#s1:target ~ .slider {transform: translateX(   0%); -webkit-transform: translateX(   0%);}
#s2:target ~ .slider {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
#s3:target ~ .slider {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
#s4:target ~ .slider {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
/* More slides? Add here more rules */


/* YOU'RE THE DESIGNER! 
   ____________________
   All above was mainly to get it working :)
   CSSgal CUSTOM STYLES / OVERRIDES HERE: */

.CSSgal{
	color: #fff;	
	text-align: center;
}
.CSSgal .slider h2 {
	margin-top: 40vh;
	font-weight: 200;
	letter-spacing: -0.06em;
	word-spacing: 0.2em;
	font-size: 3em;
}
.CSSgal a {
	border-radius: 50%;
	margin: 0 3px;
	color: rgba(0,0,0,0.8);
	text-decoration: none;
}
</style>
</head>
<body>
  <div class="CSSgal">

  <!-- Don't wrap targets in parent -->
  <s id="s1"></s> 
  <s id="s2"></s>
  <s id="s3"></s>
  <s id="s4"></s>

  <div class="slider">
    <div style="background:#5b8;">
			<h2>PURE <b>CSS</b> SLIDESHOW</h2>
			<p>Responsive Slideshow Gallery created using CSS only<br>by Roko</p>
		</div>
    <div style="background:#85b;">
			<h2>Slide 2</h2>
		</div>
    <div style="background:#e95;">
			<h2>Slide 3</h2>
		</div>
    <div style="background:#e59;">
			<h2>Slide 4</h2>
		</div>
  </div>
  
  <div class="prevNext">
    <div><a href="#s4"></a><a href="#s2"></a></div>
    <div><a href="#s1"></a><a href="#s3"></a></div>
    <div><a href="#s2"></a><a href="#s4"></a></div>
    <div><a href="#s3"></a><a href="#s1"></a></div>
  </div>

  <div class="bullets">
    <a href="#s1">1</a>
    <a href="#s2">2</a>
    <a href="#s3">3</a>
    <a href="#s4">4</a>
  </div>
</div>
</body>
</html>

11. By Joan Leon

Made by Joan Leon. CSS Text Slideshow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	-webkit-animation-duration: 20s;

	        animation-duration: 20s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
}

.item-1{
	-webkit-animation-name: anim-1;
	        animation-name: anim-1;
}

.item-2{
	-webkit-animation-name: anim-2;
	        animation-name: anim-2;
}

.item-3{
	-webkit-animation-name: anim-3;
	        animation-name: anim-3;
}

@-webkit-keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@-webkit-keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@-webkit-keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
</style>
</head>
<body>
  <p class="item-1">Lorem</p>

<p class="item-2">Lorem</p>

<p class="item-3">Lorem</p>

</body>
</html>