如何执行代码点击箭头/使用jQuery更改图像点击箭头

Question

我有代码可以在点击时更改图片。它还会改变当前所选图像的边框颜色。我很高兴，它很好用，但我想添加箭头以在下一张和上一张图像之间导航。

的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>

我该怎么办？我可以转换此代码以实现此问题，还是针对此问题有完全不同的解决方案？

#w2s, #swap, #swap2是位于主要照片顶部的图片，ID为w1s

的jsfiddle

以下是它的工作原理 https://jsfiddle.net/hcqozm4e/4/