Jquery - 如何循环此滑块？

Question

所以我一直在研究一个滑块，我真的不知道如何重复它。到目前为止，我只列出了10张幻灯片，但最后我还有20张。

这是一个JS小提琴的链接，所以你可以看到我到目前为止所得到的： https://jsfiddle.net/sth23e2w/

$(document).ready(function() {
  //settings for slider
  var width = 360;
  var animationSpeed = 1000;
  var pause = 3000;
  var currentSlide = 1;

  //cache DOM elements
  var $slider = $(".characters");
  var $slideContainer = $(".slide-characters", $slider);
  var $slides = $(".char-avatar", $slider);

$(".right-slide").click(function() {
    $slideContainer.animate(
      { "margin-left": "+=" + width },
      animationSpeed,
      function() {
        if (++currentSlide === $slides.length) {
          currentSlide = 1;
          $slideContainer.css("margin-left", 0);
        }
      }
    );
  });
  $(".left-slide").click(function() {
    $slideContainer.animate(
      { "margin-left": "-=" + width },
      animationSpeed,
      function() {
        if (++currentSlide === $slides.length) {
          currentSlide = 1;
          $slideContainer.css("margin-left", 0);
        }
      }
    );
  });
});

或者，如果你真的想要，你可以查看我在Codepen上的实时版本：https://codepen.io/Crownedpride/project/editor/ZmbqRv/

如果你想知道它将被用于什么： 我正在写一部奇幻小说，我有一位艺术家为我画画。我想通过我所做的设置在我自己的网站上显示这些字符。他将为我绘制大约20个不同的角色，虽然后来可能会有更多依赖于是否会有第2卷。

我期待你的回复。

ps：我是Jquery / js的新手，所以请放轻松我＆gt; _＆lt;