Not entirely sure how much needed information I can provide since I'm a noob. Hope you brainpower people can figure something out with what I can provide. I found some free code, from I think CodePen, for an image slider. It uses some sort of "dots" to swap beautifully between pics.

<div class="x">
<figure data-color="#aaa, #bbb">
      <img src="1.png" />
    </figure>
<figure data-color="#ccc, #ddd">
      <img src="2.png" />
    </figure>
  </div>

I have a select thingy beneath it and I would like the slider to respond to the options in the dropdown menu. For example, if I select the option value "hello" the first figure would activate, and if I select "Bye" the second figure would activate.

<select>
 <option value="Select Things">Select Things</option>
 <option value="Hello">Hello</option>
 <option value="Bye">Bye</option>
</select>

Is there a simple way to do this? Maybe OnChange or something? Or Maybe if each figure had some sort of class or value that I can call from the select menu? Or maybe it's even doable with just html?

Would also be neat if it's doable in the opposite order; if I click the first figure the select-box goes to the "Hello" value etc.

Best regards!