这是一款jQuery基于bootstrap制作左右按钮控制图片滚动，支持删除图片列表。点击弹出放大图片幻灯片预览效果，预览时可手动删除图片功能。

使用方法

在页面引入以下jquery-3.2.1.min.js、slick.js、bootstrap.min.js文件

<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/slick/slick.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>

<script>
  var previewLength;
  var imgTempList = [
          "img/118098383748c756e2o.jpg",
          "img/55a09df24b97e_1024.jpg",
          "img/0037037537817495_b.jpg",
          "img/4499633_115051034301_2.jpg",
          "img/10.jpg",
          "img/4afbfbedab64034f57ca4b0ea5c379310a551db6.jpg",
          "img/234970-14061922354979.jpg",
          "img/0010023173266263_b.jpg"
  ];
  
  //初始化
  $(function () {
  
      //图片分页展示
      $('.img-list-slider').slick({
          dots: true,
          slidesToShow: 5,
          slidesToScroll: 5
      });
  
      initEle();
  
      //预览图片
      $('.img-list-slider').on('click','.thumbnail-self .image',function (e) {
          imgEnlarge(e)
      });
  
  
      //图片删除
      $('.img-list-slider').on('click','.thumbnail-self .remove', function (e) {
          imgRemove(e);
      });
  
  
      //预览图片时删除
      $('.modal-show-image ').on('click','.img-modal #img_remove_modal', function () {
          imgRemoveModal();
      })
  
  
  });
  
  //dom初始化
  function initEle() {
      for(var i in imgTempList) {
          var str="", imgTempListValue = imgTempList[i];
          str = '<div class="thumbnail-self">'+
                  '<img class="image" alt="'+imgTempListValue+'"  src="'+imgTempListValue+'" />' +
                  '<p class="remove" data-filename="'+imgTempListValue+'" >'+'X'+'</p>'+
                  '</div>';
  
          $('.img-list-slider').slickAdd(str);
      }
  }
  
  //禁止自动轮播
  function carousel() {
      //禁止自动轮播
      $('.carousel').carousel({
          interval: false
      });
  }
  
  //图片预览放大
  function imgEnlarge(e) {
      carousel();
      //获取图片长度
      previewLength = $('.img-list-slider .thumbnail-self:not(.slick-cloned)').length;
  
      var sourceSrc = "",str = "", sourceSrcArr = [];
      //获取url数组
      $(".img-list-slider .thumbnail-self:not(.slick-cloned) img").each(function() {
          var attrSrc = $(this).attr("src");
          sourceSrcArr.push(attrSrc);
      });
      //获取当前点击的元素url
      sourceSrc = $(e.target).attr('src');
  
      //当前url在数组中位置
      var index = sourceSrcArr.indexOf(sourceSrc);
      if (index > -1) {
          for(var i in sourceSrcArr) {
              if(i == index) {
                  str = '<div class="item active">'+
                          '<img src="'+sourceSrcArr[i]+'" class="img-self">'+
                          '</div>';
              }else {
                  str = '<div class="item">'+
                          '<img src="'+sourceSrcArr[i]+'" class="img-self">'+
                          '</div>';
              }
              $(".carousel-inner-stand").append(str);
          }
      }
  
      $("#show_image").modal('show');
  
      //弹窗关闭清空数组
      var self = this;
      $('#show_image').on('hide.bs.modal', function () {
          $(".carousel-inner-stand").empty();
  
      });
  
  }
  
  //缩略图右上方按钮删除
  function imgRemove(e) {
      var imgIndex = imgTempList.indexOf(e.target.dataset.filename);
      imgTempList.splice(imgIndex,1);
      $('.img-list-slider').slickRemove(imgIndex);
      console.log(imgTempList);
  }
  
  //预览图片时删除
  function imgRemoveModal() {
      if($('.carousel-inner-stand .item').hasClass('active')){
          var nextElement = $('.active').next();
          if(nextElement.length != 0) {
              nextElement.addClass('active');
              var activeFirst = $('.carousel-inner-stand .active:first');
              var activeFirstImg = activeFirst.find('img').attr('src');
  
              modalRemove(activeFirstImg,activeFirst);
  
          }else {
              $('.carousel-inner-stand .item:first').addClass('active');
              var activeLast = $('.carousel-inner-stand .active:last');
              var activeLastImg = activeLast.find('img').attr('src');
              modalRemove(activeLastImg,activeLast);
  
          }
      }
  }
  
  //预览图片删除动作
  function modalRemove(imgSrc,activeElement) {
      previewLength--;
      var imgIndex = imgTempList.indexOf(imgSrc);
      if(previewLength > 0) {
          $('.img-list-slider').slickRemove(imgIndex);
      }else {
          $("#show_image").modal('hide');
          $('.img-list-slider').slickRemove(imgIndex);
      }
      imgTempList.splice(imgIndex,1);
      activeElement.remove();
      console.log(imgTempList);
  }
  
</script>