Слайдер с кнопками и эффектом смахивания (почти нет)

Question

У меня есть пример слайдера с 3 слайдами, и каждый слайд имеет свой цвет.

Я бы хотел добиться слайдера с эффектом смахивания, а также точками / изображениями для навигации по слайдам .

Мне удалосьСоздайте слайдер с обоими этими эффектами, но у вас не получается запустить их вместе на одном слайдере.

Прямо сейчас, у слайдера есть рабочий эффект смахивания.Я также могу применить эффект точечной навигации, изменив эту строку кода:

var slides = document.getElementsByClassName ("");

на:

var slides =document.getElementsByClassName ("slide-wrapper");

Однако, когда я это делаю, эффект свайпа перестает работать.Есть идеи, как это исправить и заставить их работать вместе?Чтобы попробовать код, откройте livedemo на f5, и он также работает с мышью. Livedemo

if (navigator.msMaxTouchPoints) {

  $('#slider').addClass('ms-touch');

  $('#slider').on('scroll', function() {
    $('.slide-image').css('transform','translate3d(-' + (100-$(this).scrollLeft()/6) + 'px,0,0)');
  });

} else {

  var slider = {

    el: {
      slider: $("#slider"),
      holder: $(".holder"),
      imgSlide: $(".slide-image")
    },

    slideWidth: $('#slider').width(),
    touchstartx: undefined,
    touchmovex: undefined,
    movex: undefined,
    index: 0,
    longTouch: undefined,
    
    init: function() {
      this.bindUIEvents();
    },

    bindUIEvents: function() {

      this.el.holder.on("touchstart", function(event) {
        slider.start(event);
      });

      this.el.holder.on("touchmove", function(event) {
        slider.move(event);
      });

      this.el.holder.on("touchend", function(event) {
        slider.end(event);
      });

    },

    start: function(event) {
      // Test for flick.
      this.longTouch = false;
      setTimeout(function() {
        window.slider.longTouch = true;
      }, 250);

      // Get the original touch position.
      this.touchstartx =  event.originalEvent.touches[0].pageX;

      // The movement gets all janky if there's a transition on the elements.
      $('.animate').removeClass('animate');
    },

    move: function(event) {
      // Continuously return touch position.
      this.touchmovex =  event.originalEvent.touches[0].pageX;
      // Calculate distance to translate holder.
      this.movex = this.index*this.slideWidth + (this.touchstartx - this.touchmovex);
      // Defines the speed the images should move at.
      var panx = 100-this.movex/6;
      if (this.movex < 600) { // Makes the holder stop moving when there is no more content.
        this.el.holder.css('transform','translate3d(-' + this.movex + 'px,0,0)');
      }
      if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving.
        this.el.imgSlide.css('transform','translate3d(-' + panx + 'px,0,0)');
      }
    },

    end: function(event) {
      // Calculate the distance swiped.
      var absMove = Math.abs(this.index*this.slideWidth - this.movex);
      // Calculate the index. All other calculations are based on the index.
      if (absMove > this.slideWidth/2 || this.longTouch === false) {
        if (this.movex > this.index*this.slideWidth && this.index < 2) {
          this.index++;
        } else if (this.movex < this.index*this.slideWidth && this.index > 0) {
          this.index--;
        }
      }      
      // Move and animate the elements.
      this.el.holder.addClass('animate').css('transform', 'translate3d(-' + this.index*this.slideWidth + 'px,0,0)');
      this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 100-this.index*50 + 'px,0,0)');

    }

  };

  slider.init();
}

// CONTROL THE SLIDER

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
  clearInterval(myInterval);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
      slides[i].animate([{opacity:'0.5'}, {opacity:'1'}],
      {duration: 1000, fill:'forwards'})
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

var myInterval = window.setInterval(function(){
    plusSlides(1);
}, 5000);

function stopSlides() {
  clearInterval(myInterval);
}

.slider-container {
  width: 300px;
  height: 250px;
  margin: 0 auto;
  background-color: lightblue;
}

.slider-wrap {
  width: 300px;
  height: 250px;
  position: absolute;
  left: 50%;
  margin-left: -150px;
  top: 0%;
  /* margin-top: -225px; */
}

.dot-container {
  width: 300px;
  height: 50px;
  background-color: #1c72ff;
  position: absolute;
  margin-top: 200px;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  width: 70px;
  height: 35px;
  background-color: white;
  margin: 0px 8px;
  cursor: pointer;
}


.animate {
  transition: transform 0.3s ease-out;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ms-touch.slider {
  overflow-x: scroll;
  overflow-y: hidden;
  
  -ms-overflow-style: none;
  /* Hides the scrollbar. */
  
  -ms-scroll-chaining: none;
  /* Prevents Metro from swiping to the next tab or app. */
  
  -ms-scroll-snap-type: mandatory;
  /* Forces a snap scroll behavior on your images. */
  
  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
  /* Defines the y and x intervals to snap to when scrolling. */
}

.holder {
  width: 300%;
  max-height: 500px;
  height: 100%;
  overflow-y: hidden;
}

.slide-wrapper {
  width: 33.333%;
  height: 100%;
  float: left;
  height: 250px;
  position: relative;
  overflow: hidden;
}

.slide {
  height: 250px;
  width: 300px;
  position: absolute;
  background-color: lightblue;
}

.slide2 {
  background-color: lightgreen;
}

.slide3 {
  background-color: red;
}

.slide:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
}

/* .slide div {
  width: 300px;
  height: 250px;
  position: absolute;
  z-index: 0;
} */

<div class="slider-container">
<div class="slider-wrap">
  <div class="slider" id="slider">
    <div class="holder">
      <div class="slide-wrapper">
        <div class="slide"></div>
      </div>
      <div class="slide-wrapper">
        <div class="slide slide2"></div>
      </div>
      <div class="slide-wrapper">
        <div class="slide slide3"></div>
      </div>
    </div>
  </div>
</div>
     <div class="dot-container">
    <div class="dot dot1" onclick="currentSlide(1)"></div>
    <div class="dot dot2" onclick="currentSlide(2)"></div>
    <div class="dot dot3" onclick="currentSlide(3)"></div>
    </div>
</div>