demo-image-selector1.html

<div id="demo1">
  <img src="pathto/sign1.png" alt="交通標識" class="ImageSelector__option" data-value="1">
  <img src="pathto/sign2.png" alt="交通標識" class="ImageSelector__option" data-value="2">
  <img src="pathto/sign3.png" alt="交通標識" class="ImageSelector__option" data-value="3">
  <img src="pathto/sign4.png" alt="交通標識" class="ImageSelector__option" data-value="4">
  <img src="pathto/sign5.png" alt="交通標識" class="ImageSelector__option" data-value="5">
  <img src="pathto/sign6.png" alt="交通標識" class="ImageSelector__option" data-value="6">
  <img src="pathto/sign7.png" alt="交通標識" class="ImageSelector__option" data-value="7">
  <img src="pathto/sign8.png" alt="交通標識" class="ImageSelector__option" data-value="8">
  <img src="pathto/sign9.png" alt="交通標識" class="ImageSelector__option" data-value="9">
</div>

demo-image-selector1.js

const el_demo1 = document.getElementById('demo1');
const image_selector1 = new ImageSelector(el_demo1);

demo-image-selector2.html

<div id="demo2">
  <img src="pathto/sign1.png" alt="交通標識" class="ImageSelector__option" data-value="1">
  <img src="pathto/sign2.png" alt="交通標識" class="ImageSelector__option" data-value="2">
  <img src="pathto/sign3.png" alt="交通標識" class="ImageSelector__option ImageSelector__s-selected" data-value="3">
  <img src="pathto/sign4.png" alt="交通標識" class="ImageSelector__option" data-value="4">
  <img src="pathto/sign5.png" alt="交通標識" class="ImageSelector__option" data-value="5">
  <img src="pathto/sign6.png" alt="交通標識" class="ImageSelector__option" data-value="6">
  <img src="pathto/sign7.png" alt="交通標識" class="ImageSelector__option" data-value="7">
  <img src="pathto/sign8.png" alt="交通標識" class="ImageSelector__option" data-value="8">
  <img src="pathto/sign9.png" alt="交通標識" class="ImageSelector__option" data-value="9">
</div>

demo-image-selector2.js

const el_demo2 = document.getElementById('demo2');
const image_selector2 = new ImageSelector(el_demo2);
image_selector2.setHeight(600);

demo-image-selector3.css

.demo-flex{
  display: flex;
  align-items: center;
}
.national-flag{
  box-sizing: border-box;
  margin-right: 4px;
  border: 1px solid #777;
}

demo-image-selector3.html

  <div id="demo3">
    <div class="ImageSelector__option demo-flex" data-value="japan">
      <img src="pathto/japan.png" alt="日本の国旗" class="national-flag">
      Japanese
    </div>
    <div class="ImageSelector__option demo-flex" data-value="usa">
      <img src="pathto/usa.png" alt="アメリカ合衆国の国旗" class="national-flag">
      English
    </div>
    <div class="ImageSelector__option demo-flex" data-value="china">
      <img src="pathto/china.png" alt="中国の国旗" class="national-flag">
      Chinese
    </div>
  </div>
  <div id="output3"></div>

demo-image-selector3.js

const el_output3 = document.getElementById('output3');
const el_demo3 = document.getElementById('demo3');
const image_selector3 = new ImageSelector(el_demo3);
image_selector3.setOnChange(demoFunc3);

function demoFunc3(){
  el_output3.textContent = 'value=' + image_selector3.value;
}

demo-image-selector4.html

  <div id="demo4">
    <div class="ImageSelector__option demo-flex" data-value="japan">
      <img src="pathto/japan.png" alt="日本の国旗" class="national-flag">
      Japanese
    </div>
    <div class="ImageSelector__option demo-flex" data-value="usa">
      <img src="pathto/usa.png" alt="アメリカ合衆国の国旗" class="national-flag">
      English
    </div>
    <div class="ImageSelector__option demo-flex" data-value="china">
      <img src="pathto/china.png" alt="中国の国旗" class="national-flag">
      Chinese
    </div>
  </div>

demo-image-selector4.js

const el_demo4 = document.getElementById('demo4');
const image_selector4 = new ImageSelector(el_demo4);
image_selector4.setValue('usa');