动态生成的幻灯片放映错误

我有一个幻灯片,它从JSON获取图像源并生成图像数量的列表。代码如下:

//Json
  var sidenav = $('.sidenav');

  $.getJSON('http://localhost:8080/data.json', function(result){
    for (var i = 0 ; i < result.length ; i++) {
      sidenav.append(`<li class="selected"><img src="${result[i].src}" alt="${result[i].alt}"></li>`);

      var slides = $('.sidenav li');
      var slideIndex = 0;
      var slideTime = animate();

      slideTo(slides[0]);

      slides.click(function() {
      clearInterval(slideTime);
      slideTime = animate();

      var selectedIndex = $(this).index();
      var slide = slides[selectedIndex];
      slideTo(slide);

      });
    }

    function slideTo(slide) {
      slides.removeClass("selected");
      $(slide).addClass("selected");
      slideIndex = jQuery(slide).index();
    }

    function animate() {
      return setInterval(function() {
        var slide = slides[slideIndex];
        slideTo(slide)
        slideIndex++;
        if (slideIndex == slides.length) {
          slideIndex = 0;
        }
      },3000);
    }

     <div class="slider">
        <ul class="sidenav">

        </ul>
      </div>

CSS无处不在,但在这里并不重要。这是因为它获取第一个li项并添加一个类 selected . 但由于某种原因,它跳到最后一个并没有移动。我觉得我错过了一些小而重要的东西。。有什么意见吗?