JSFiddle - React, Tailwind, and code Playground

by alessia_fachin

HTML

<div class="slideshow">
	<ul id="prova">
        <li style="display:block" id="foto1"><img src="http://rayvenephotography.net/wp-content/uploads/2013/12/Nature-Photography-Great-Rainforest-Photos.jpg"/></li>
        <li id="foto2"><img src="http://simplewishphotography.com/wp-content/uploads/2013/09/Nature-Photography-Fine-Art-Impressions.jpg"/></li>
        <li><img src=""/></li>
        <li><img src=""/></li>
        <li><img src=""/></li>
	</ul>
	
    <nav id="img-nav">
	    <li id="1">1</a>
	    <li id="2">2</a>
        <li id="3" href="">3</a>
        <li id="4" href="">4</a>
    </nav>
</div>

CSS

#prova li {
    display:none;
}

JavaScript

$(document).ready(function() {
//funzione per visualizzare i dati generali

  $("#2").click(function(evt) {
    evt.preventDefault();
    $("#foto1").fadeOut();
    $("#foto2").fadeIn();  
  });
});