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;
}

.carousel input {
  display: none;
}

.move-right-container, .move-left-container {
  /* needs to fit all the pages inside */
  width: 600px; /* = page.width * 6 */
}

.move-left-container {
  margin-left: -200px; /* initial state */
}

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

#third-page-left:checked ~ .move-left-container {
  /* moves two pages to the right */
  margin-left: 0; /* = normal position 0 */
}

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

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

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

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

#third-page-left:checked ~ .for-third-page-left,
#third-page-left:checked ~ .for-second-page-left,

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

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

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

dabblet.html

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

  <div class="carousel">
    <input type="radio" name="controls-left" id="first-page-left" checked>
    <input type="radio" name="controls-left" id="second-page-left">
    <input type="radio" name="controls-left" id="third-page-left">
    
    <label class="for-second-page-left" for="second-page-left">
      <span class="button next">prev</span>
    </label>
    
    <label class="for-third-page-left" for="third-page-left">
      <span class="button next">prev</span>
    </label>
    
    <label class="for-first-page-left" for="first-page-left">
      <span class="button next">prev</span>
    </label>

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

</div>

dabblet.js

// alert('Hello world!');

settings.json

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