Example of carrossel CSS only simplified

dabblet.css

/**
 * Example of carrossel CSS only simplified
 */
/* this part is just look-and-feel */
.just-to-centralize-not-related-to-the-example {
  display: inline-block;
  margin-top: 20px;
  text-align: center;
  width: 100%;
}

.page {
  width: 100px;
  height: 30px;
  color: white;
  padding-top: 15px;
  font-size: 15px;
  font-weight: bold;
}

.first {
  background-color: blue;
}

.second {
  background-color: red;
}

.third {
  background-color: green;
}

.carousel {
  border: 5px solid black;
}

.button {
  text-decoration: underline;
  cursor: pointer;
}

/* end of look-and-feel */

.carousel {
  display: inline-block;
  position: relative;
  width: 100px; /* the same width of the page */
}

.page {
  float: left;
}

.move-container {
  /* needs to fit all the pages inside */
  width: 300px; /* = page.width * 3 */
}

#second-page:checked ~ .move-container {
  /* moves one page to the right */
  margin-left: -100px; /* = page.width * -1 */
}

#third-page:checked ~ .move-container {
  /* moves two pages to the right */
  margin-left: -200px; /* = page.width * -2 */
}

.carousel input {
  display: none;
}

#first-page:checked ~ .for-first-page,
#first-page:checked ~ .for-third-page,

#second-page:checked ~ .for-first-page,
#second-page:checked ~ .for-second-page,

#third-page:checked ~ .for-third-page,
#third-page:checked ~ .for-second-page {
  display: none;
}

dabblet.html

<div class="just-to-centralize-not-related-to-the-example">

  <div class="carousel">
    <input type="radio" name="controls" id="first-page" checked>
    <input type="radio" name="controls" id="second-page">
    <input type="radio" name="controls" id="third-page">
    
	<label class="for-second-page" for="second-page">
      <span class="button next">next</span>
    </label>
    
    <label class="for-third-page" for="third-page">
      <span class="button next">next</span>
    </label>
    
    <label class="for-first-page" for="first-page">
      <span class="button next">next</span>
    </label>
    
    <div class="move-container">
      <div class="page first">A</div>
      <div class="page second">B</div>
      <div class="page third">C</div>       
   </div>
  <div>

</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}