JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="gallery">

  <input type="radio" name="gallery-controls" id="dot-0" checked="checked" />
  <input type="radio" name="gallery-controls" id="dot-1" />
  <input type="radio" name="gallery-controls" id="dot-2" />

  <ul class="gallery__images">
    <li data-image="0">
      <img src="https://i.imgur.com/wGTf8bT.jpg" />
      <label for="dot-2"></label>
      <label for="dot-1"></label>
    </li>
    <li data-image="1">
      <img src="https://i.imgur.com/cm2yrHp.jpg" />
      <label for="dot-0"></label>
      <label for="dot-2"></label>
    </li>
    <li data-image="2">
      <img src="https://i.imgur.com/svjCZaI.jpg" />
      <label for="dot-1"></label>
      <label for="dot-0"></label>
    </li>
  </ul>
  
  <div class="gallery__controls">
    <label for="dot-0"></label>
    <label for="dot-1"></label>
    <label for="dot-2"></label>
  </div>

</div>

CSS

body{
  background-color: #eee;
}


/**
 * Main wrap
 */
.gallery{
  display    : block;
  margin     : 3em auto;
  max-width  : 640px;
  padding    : 0 1em;
  user-select: none;
}


/**
 * Slides
 */
.gallery__images{
  margin  : 0;
  padding : 0;
  position: relative;
}
.gallery__images > li{
  box-shadow     : 0 2em 4em -2em rgba(0, 0, 0, 0.75);
  display        : none;
  list-style-type: none;
  margin         : 0;
  padding        : 0;
  position       : relative;
}
.gallery__images img{
  display  : block;
  max-width: 100%;
}


/**
 * Next/previous controls
 */
.gallery__images > li > label{
  bottom    : 0;
  cursor    : pointer;
  display   : block;
  left      : 0;
  opacity   : 0;
  overflow  : hidden;
  position  : absolute;
  top       : 0;
  transition: opacity 300ms;
  width     : 50%;
}
.gallery__images > li > label:hover{
  opacity: 1;
}
.gallery__images > li > label:nth-of-type(2){
  left: 50%;
}
.gallery__images > li > label:before{
  background   : rgba(255, 255, 255, 0.75);
  border-radius: 0 0.2em 0.2em 0;
  box-shadow   : 0 0 0.5em rgba(0, 0, 0, 0.3);
  color        : #000;
  content      : '◀';
  display      : block;
  line-height  : 1;
  padding      : 0.75em 0.5em;
  position     : absolute;
  top          : 50%;
  transform    : translateY(-50%);
}
.gallery__images > li > label:nth-of-type(2):before{
  border-radius: 0.2em 0 0 0.2em;
  content      : '▶';
  right        : 0;
}


/**
 * Dot controls
 */
.gallery__controls{
  margin-top: 0.5em;
  text-align: center;
}
.gallery__controls > label{
  background-color: rgba(0, 0, 0, 0.5);
  border-radius   : 50%;
  box-shadow      : inset 0 0 0.25em rgba(0, 0, 0, 0.4);
  cursor          : pointer;
  display         : inline-block;
  height          : 0.75em;
  margin          : 0.5em;
  transition      : background-color 300ms;
  width           : 0.75em;
}
.gallery__controls > label:hover{
  background-color: #2d5c99;
}


/**
 * Active display controllers
 */
.gallery > input{
  display:...

JavaScript

/**
 * CSS only image carousel
 */