Rantai Pasok Slider

Simple gallery

by sitis

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="gallery" id="onboard">
  <label for="image-1" class="1"><img src="https://i.postimg.cc/KjQdxyDY/PT-KS-2.png" class="article-img border"></label>
  <label for="image-2" class="2"><img src="https://i.postimg.cc/BQTj57Qn/PT-PEAK-1.png" class="article-img border"></label>
 
  
  
</div>
<div class="gallery-selection">
  <input type="radio" id="image-1" name="onboard" checked="checked">
  <label for="image-1"></label>PT KS
  <input type="radio" id="image-2" name="onboard">
  <label for="image-2"></label> PT PEAK
  <input type="radio" id="image-3" name="onboard">

</div>

SCSS

.gallery {
text-align:center;
  overflow: hidden;
  img {
    height: 100%;
    width : 100%;
  }
  label:not(:first-child) {
    display: none;
  }
}

input[type="radio"] {
  display: none;
  &+ label {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    display: inline-block;
    border-radius: 100px;
    &:hover {
      cursor: pointer;
    }
  }
  &:checked + label {
    background-color: #FD003B;
  }
}


.gallery-selection {
  text-align:center;
}

JavaScript

$(document).ready(function() {
  $("input").click(function() {
    /* get gallery id */
    var gid = $(this).attr("id");
    /* Get gallery unique name */
    var gun = $(this).attr("name");
    $("#" + gun + " label").hide();
    $("label[for='" + gid + "']").show();
  });
});