JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

<ul id="slideshow" class="bislideshow">
  <li><img src="http://placehold.it/100&text=image01" alt="image01"/></li>
  <li><img src="http://placehold.it/100&text=image02" alt="image02"/></li>
  <li><img src="http://placehold.it/100&text=image03" alt="image03"/></li>
</ul>

    <ul>
    <li class="set1"><a href="#">SET 1</a></li>
    <li class="set2"><a href="#">SET 2</a></li>
    <li class="set3"><a href="#">SET 3</a></li>
    </ul>

JavaScript

$(function() {
    $img1 = $( "#slideshow > li:nth-child(1) > img" );
    $img2 = $( "#slideshow > li:nth-child(2) > img" );
    $img3 = $( "#slideshow > li:nth-child(3) > img" );
    $(".set1").click(function(e){
        e.preventDefault() ;
        $img1.attr({'src':'http://placehold.it/100&text=image01','alt':'image01'});
        $img2.attr({'src':'http://placehold.it/100&text=image02','alt':'image02'});
        $img3.attr({'src':'http://placehold.it/100&text=image03','alt':'image03'});
    });
    $(".set2 > a").click(function(e){
        e.preventDefault() ;
        $img1.attr({'src':'http://placehold.it/100&text=image04','alt':'image04'});
        $img2.attr({'src':'http://placehold.it/100&text=image05','alt':'image05'});
        $img3.attr({'src':'http://placehold.it/100&text=image06','alt':'image06'});
    });
    $(".set3").click(function(e){
        e.preventDefault() ;
        $img1.attr({'src':'http://placehold.it/100&text=image07','alt':'image07'});
        $img2.attr({'src':'http://placehold.it/100&text=image08','alt':'image08'});
        $img3.attr({'src':'http://placehold.it/100&text=image09','alt':'image09'});
    });
});