不删除第一张幻灯片的 Javascript slider 添加/删除功能

Question

我已经查看这个站点几年了，但直到现在才遇到一个无法通过阅读其他人的答案来解决的问题。

我觉得我的问题很容易克服，但由于某种原因我遇到了障碍。

我有一个“灵活”的 slider ，可以添加和删除幻灯片，将来我希望能做到第一张幻灯片是不可删除的上传表单。每次上传都会生成一张新幻灯片。删除该上传将删除该特定幻灯片。

我的第一个问题是我不确定如何让第一张幻灯片不可删除...如果被这个问题挂断意味着我将无法解决创建我上面提到的问题，可能有 < em>咳咳 为有能力完成任务的人提供有偿工作。 (对不起，如果这样说是违反规则的)

这是我的代码，希望它是你所需要的:

$(document).ready(function() {

  $('.add-remove').slick({
      dots: true,
      slidesToShow: 1,
      speed: 500,
      slidesToScroll: 1
  });
  var slideIndex = 1;
  $('.js-add-slide').on('click', function() {
      slideIndex++;
      $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
  });

  $('.js-remove-slide').on('click', function() {
      $('.add-remove').slick('slickRemove', slideIndex - 1);
      if (slideIndex !== 0){
          slideIndex--;
      }
  });

});

Answer 1

你所说的slideIndex不是索引，而是幻灯片的数量。这意味着您总是要删除最后一张幻灯片。 slideCount 将是一个更合适的名称。要限制删除并仅删除事件元素，您可以这样做:

var slideCount = 0, slideSequence = 0;

$('.js-remove-slide').on('click', function() {
    var slideIndex = $('.slick-slide.slick-active').data('slick-index');
    if (slideIndex != 0){
        $('.add-remove').slick('slickRemove', slideIndex);
        slideCount--;
    }
});

$('.js-add-slide').on('click', function() {
    slideCount++;
    $('.add-remove').slick('slickAdd','<div><h3>' + slideSequence + '</h3></div>');
    slideSequence++;
});

add 可能会在最后添加一张新幻灯片，这取决于 slickAdd 的实现，并且它总是会得到下一个数字，即使某些内容已被删除，以显示某些内容被删除的位置并创建。