javascript - How to execute a code clicking on arrows / Changing images clicking on arrows using jQuery -

i've got code supposed change images on click. changes chosen image's border color. i'm quite happy it, works nicely i'd add arrows navigate between next , previous images.

jquery

  $(document).ready(function(){     $('li.switch img, li.switch1 img').click(function() {       var current = this;       var elements = $("#w2s, #swap, #swap2");       var src = this.src;     $(elements).css("border", "3px solid #fff");     $(current).css("border", "3px solid  #000");     $("#w1s").fadeout(400, function(){       $(this).fadein(400)[0].src = src;      });   }); }); 

html

   <div class="bottleswrapper">     <img src="right.png" id="right">     <img src="left.png" id="left">   <div class="thumbs">     <img src="pallets.jpg" id="w1s">   </div>    <ul class="switchphoto">    <li class="switch1">    <img src="pallets.jpg" id="w2s">   </li>    <li class="switch">    <img src="prod.jpg" id="swap">   </li>    <li class="switch">       <img src="modernhome.jpg" id="swap2">   </li>   </ul>   </div> 

how can so? can transform code make happen or there whole different solution problem?

#w2s, #swap, #swap2 images positioned below main photo on top, id w1s

jsfiddle

here's how works https://jsfiddle.net/hcqozm4e/4/