<h1>Pure CSS Slideshow v2</h1>
<div class="container">
  <div class="slideshow">
    <div id="slide-1" class="slide">
              <input type="radio" id="slide-1-prev" name="slide-selector" /><label for="slide-1-prev" title="previous"></label>
              <input type="radio" id="slide-1-next" name="slide-selector" /><label for="slide-1-next" title="previous"></label>
    		  <img src="https://c1.staticflickr.com/9/8724/16310801553_cea90ae63d_n.jpg" />
    		</div>
    		<div id="slide-2" class="slide">
              <input type="radio" id="slide-2-prev" name="slide-selector" /><label for="slide-2-prev" title="previous"></label>
              <input type="radio" id="slide-2-next" name="slide-selector" /><label for="slide-2-next" title="previous"></label>
    			<img src="https://c2.staticflickr.com/4/3719/19819674272_2384feaaf8_n.jpg" />
    		</div>
    		<div id="slide-3" class="slide">
              <input type="radio" id="slide-3-prev" name="slide-selector" /><label for="slide-3-prev" title="previous"></label>
              <input type="radio" id="slide-3-next" name="slide-selector" /><label for="slide-3-next" title="previous"></label>
    			<img src="https://c2.staticflickr.com/2/1627/24319275501_3ec6f36fa7_n.jpg" />
    		</div>
    		<div id="slide-4" class="slide">
              <input type="radio" id="slide-4-prev" name="slide-selector" /><label for="slide-4-prev" title="previous"></label>
              <input type="radio" id="slide-4-next" name="slide-selector" /><label for="slide-4-next" title="previous"></label>
    			<img src="https://c2.staticflickr.com/2/1460/25194537936_e3c54faefc_n.jpg" />
    		</div>
    		<div id="slide-5" class="slide">
              <input type="radio" id="slide-5-prev" name="slide-selector" /><label for="slide-5-prev" title="previous"></label>
              <input type="radio" id="slide-5-next" name="slide-selector" /><label for="slide-5-next" title="previous"></label>
    			<img src="https://c2.staticflickr.com/2/1460/26216238325_9c425923a7_n.jpg" />
    		</div>
    		<div id="slide-6" class="slide">
              <input type="radio" id="slide-6-prev" name="slide-selector" /><label for="slide-6-prev" title="previous"></label>
              <input type="radio" id="slide-6-next" name="slide-selector" /><label for="slide-6-next" title="previous"></label>
    			<img src="https://c2.staticflickr.com/8/7578/26194232483_8204bf119b_n.jpg" />
    		</div>
    		<div id="slide-7" class="slide">
              <input type="radio" id="slide-7-prev" name="slide-selector" /><label for="slide-7-prev" title="previous"></label>
              <input type="radio" id="slide-7-next" name="slide-selector" checked /><label for="slide-7-next" title="previous"></label>
    			<img src="https://c2.staticflickr.com/8/7106/26862741906_d5283c42ba_n.jpg" />
    		</div>
  </div>
  <div class="pagination">
    <label for="slide-7-next" title="slide 1"></label>
    <label for="slide-1-next" title="slide 2"></label>
    <label for="slide-2-next" title="slide 3"></label>
    <label for="slide-3-next" title="slide 4"></label>
    <label for="slide-4-next" title="slide 5"></label>
    <label for="slide-5-next" title="slide 6"></label>
    <label for="slide-6-next" title="slide 7"></label>
  </div>
</div>

<aside>
  <h2>About</h2>

  <p>I wanted to create a pure CSS image slideshow and this is the result. In my <a href="https://codepen.io/cchana/pen/xxwgLgY">original attempt</a>, I created the slideshow with <code>a</code> tags, but with the <code>:has()</code> selector I can use input elements which solve two of the problems I had.</p>

  <p>This slideshow was created using just CSS and HTML. Click anywhere on the left half to go to the previous slide, anywhere on the right half to go to the next slide. Oh and it loops in a carousel.</p>

  <p>There's pagination too so you can jump to any slide.</p>

  <h2>What could be improved?</h2>

  <ul>
    <li>Automatically cycle through images</li>
  </ul>

</aside>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];600&display=swap');

body {
  background: linear-gradient(-45deg, #83a4d4, #b6fbff);
  font-family: 'Open Sans', sans-serif;
}

h1 {
  text-align: center;
}

h1,
aside,
.container {
  margin: 0 auto 20px;
  max-width: 500px;
}

label {
    cursor: pointer;
}

.container {
  border-radius: 5px;
  margin: 0 auto;
  position: relative;
  transition: box-shadow 200ms;
  &:hover {
    box-shadow: 0 10px 50px -10px rgba(0,0,0,0.25);
  }

  &:has(#slide-1-prev:checked) {
      #slide-7 {
          display: block;
      }
      .pagination label:nth-child(7) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-1-next:checked) {
      #slide-2 {
          display: block;
      }
      .pagination label:nth-child(2) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-2-prev:checked) {
      #slide-1 {
          display: block;
      }
      .pagination label:nth-child(1) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-2-next:checked) {
      #slide-3 {
          display: block;
      }
      .pagination label:nth-child(3) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-3-prev:checked) {
      #slide-2 {
          display: block;
      }
      .pagination label:nth-child(2) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-3-next:checked) {
      #slide-4 {
          display: block;
      }
      .pagination label:nth-child(4) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-4-prev:checked) {
      #slide-3 {
          display: block;
      }
      .pagination label:nth-child(3) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-4-next:checked) {
      #slide-5 {
          display: block;
      }
      .pagination label:nth-child(5) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-5-prev:checked) {
      #slide-4 {
          display: block;
      }
      .pagination label:nth-child(4) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-5-next:checked) {
      #slide-6 {
          display: block;
      }
      .pagination label:nth-child(6) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-6-prev:checked) {
      #slide-5 {
          display: block;
      }
      .pagination label:nth-child(5) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-6-next:checked) {
      #slide-7 {
          display: block;
      }
      .pagination label:nth-child(7) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-7-prev:checked) {
      #slide-6 {
          display: block;
      }
      .pagination label:nth-child(6) {
          background-color: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }
  &:has(#slide-7-next:checked) {
      #slide-1 {
          display: block;
      }
      .pagination label:nth-child(1) {
          background: #FFF;
          box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
      }
  }

}
.slideshow {
	position: relative;
	width: 100%;
	&:after {
		content: '';
		display: block;
		padding-bottom: calc((100% / 6) * 4);
	}
    label {
        display: block;
        height: 100%;
        opacity: 0;
        position: absolute;
        transition: opacity 0.5s;
        width: 50%;
        &:nth-child(4) {
            left: 50%;
        }
        &:after {
            border-color: #FFF #FFF transparent transparent;
            border-style: solid;
            border-width: 2px;
            color: #FFF;
            display: block;
            height: 10px;
            position: absolute;
            top: calc(50% - 5px);
            width: 10px;
        }
        &:nth-child(2):after {
            content: '';
            left: 10px;
            transform: rotate(-135deg);
        }
        &:nth-child(4):after {
            content: '';
            right: 10px;
            transform: rotate(45deg);
        }
    }
	&:hover label {
		opacity: 1;
	}
	.slide {
		background-color: #FFF;
		box-sizing: border-box;
		display: none;
		height: 100%;
		position: absolute;
		width: 100%;
		img {
            border-radius: 5px;
			width: 100%;
		}
        input {
            display: none;
            &:checked {
                + label {
                    background-color: rgba(0,0,0,0.5);
                }
            }
        }
	}
}
.pagination {
  display: flex;
  bottom: 10px;
  justify-content: center;
  position: absolute;
  width: 100%;
  label {
    background: rgba(#FFF,0.5);
    border-radius: 50%;
    display: block;
    height: 10px;
    width: 10px;
    &:not(:last-child) {
      margin-right: 5px;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.