JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<div id="group">
    <div class="current">
    
      <ul>
        <li>
          <input type="checkbox" class="box" id="cb1" />
          <label for="cb1"><img src="https://picsum.photos/seed/100/100" />1</label>
        </li>
        <li>
          <input type="checkbox" class="box" id="cb2" />
          <label for="cb2"><img src="https://picsum.photos/seed/101/101" />2</label>
        </li>
        <li>
          <input type="checkbox" class="box" id="cb3" />
          <label for="cb3"><img src="https://picsum.photos/seed/102/102" /></label>
        </li>
        <li>
          <input type="checkbox" class="box" id="cb4" />
          <label for="cb4"><img src="https://picsum.photos/seed/103/103" /></label>
        </li>
      </ul>

    </div>
    <div>
    
    <ul>
  <li>
    <input type="checkbox" class="box" id="cb5" />
    <label for="cb5"><img src="https://picsum.photos/seed/104/104" /></label>
  </li>
  <li>
    <input type="checkbox" class="box" id="cb6" />
    <label for="cb6"><img src="https://picsum.photos/seed/105/105" /></label>
  </li>
  <li>
    <input type="checkbox" class="box" id="cb7" />
    <label for="cb7"><img src="https://picsum.photos/seed/106/106" /></label>
  </li>
  <li>
    <input type="checkbox" class="box" id="cb8" />
    <label for="cb8"><img src="https://picsum.photos/seed/107/107" /></label>
  </li>
</ul>
    
    </div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
</div>
<div style="display:none" id="prev">prev</div>
<div id="next">next</div>

CSS

#group div{
    display: none;
}
#group div.current{
    display: block;
    border: 1px solid red;
    background-color: white;
}

ul {
  display: grid;
  list-style: none;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: 1px solid #000;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  opacity: 0.5;
}


:checked + label img {
  opacity: 1.0;
}

body {
  background: orange;
  background-image: radial-gradient(rgba(0,0,0,0.2), 25px, transparent 0);
  background-size: 60px 60px;
  
}

JavaScript

function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    var index = $current.index();
    var newIndex = index+delta;
    // Range check the new index
    newIndex = (newIndex < 0) ? 0 : ((newIndex > $items.length) ? $items.length : newIndex); 
    if (newIndex != index){
        $current.removeClass('current');
        $current = $items.eq(newIndex).addClass('current');
        // Hide/show the next/prev
        $("#prev").toggle(!$current.is($items.first()));    
        $("#next").toggle(!$current.is($items.last()));    
    }
}
$("#next").click(function () {
    updateItems(1);
});
$("#prev").click(function () {
    updateItems(-1);
});