Javascript-форум - Показать сообщение отдельно - Как записать номера в data-id

DenKuzmin17 · #8 (**permalink**) 04.06.2019, 10:30

Подскажите, пожалуйста, почему не срабатывает строка "this.sliderPoint.on("click", function () {" ?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script src="https://profforma.store/assets/js/jquery.min.js"></script>
<script src="https://profforma.store/assets/js/jquery.touchSwipe.min.js"></script>
  <style type="text/css">
section, .block, .slider-box, .slider, .slide, .slider-btn {
  display: flex;
}
section, .slide, .slider-btn {
  align-items: center;
  justify-content: center;
}
section {
  height: 100vh;
}
.block, .slide {
  width: 30vw;
}
.block {
  height: 100px;
}
.slider-box {
  position: relative;
  overflow: hidden;
  border: 1px solid #909090;
}
.slider-btn {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 35px;
  background: #000;
}
.next {
  right: 0;
}
.slider-pagination {
  display: flex;
  position: absolute;
  left: 47%;
  bottom: 0;
  width: 40px;
  height: 15px;
  background: #000;
}
.slider-point {
  width: 10px;
  height: 10px;
  margin: 2px;
  background: #fff;
  border-radius: 50%;
}
</style>

  <script>
class Slider {
  constructor(slider) {
    this.currentImg = 0;
    this.speed = 500;
    
    this.swipeStatus = this.swipeStatus.bind(this);
    this.keyboardHandler = this.keyboardHandler.bind(this);
    this.scrollImages = this.scrollImages.bind(this);
    
    this.previousImage = this.previousImage.bind(this);
    this.nextImage = this.nextImage.bind(this);
    
    this.slider = $(slider);
    this.slider
      .parent()
      .attr("tabIndex", 0)
      .on("blur focus click", this.keyboardHandler)
      .swipe({
        triggerOnTouchEnd: true,
        triggerOnTouchLeave: true,
        swipeStatus: this.swipeStatus,
        allowPageScroll: "vertical",
        threshold: 75
      });
    this.maxImages = this.slider.find(">*").length;
    
    if ( 0 < ( this.maxImages - ( this.slider.parent().width() / this.slider.find(".slide").width() ) )) {
        this.slider.parent().append('<div class="slider-btn previous"></div><div class="slider-btn next"></div><div class="slider-pagination"></div>');
        const
          count = this.slider.find('.slide').length,
          html = Array(count).fill('<div class="slider-point" data-id=""></div>').map(fr).join('');
      
          function fr(value, index, array) {
             return value.replace('""', '"' + (index + 1) + '"');
          }

        this.slider.parent().find('.slider-pagination').append(html);
    }
    
    this.prevBtn = this.slider.parent().find(".slider-btn.previous");
    this.nextBtn = this.slider.parent().find(".slider-btn.next");
    this.sliderPoint = this.slider.parent().find('.slider-point');
    
    this.prevBtn.on("click", this.previousImage);
    this.nextBtn.on("click", this.nextImage);
    this.sliderPoint.on("click", function () {
      this.currentImg = this.dataset.id;
      this.scrollImages(this.currentImg, this.speed);
    });
  
  }
    keyboardHandler(event) {
        if (event.type === "focus") {
            document.addEventListener("keydown", this.keyboardHandler);
            this.constructor.activeInstance = this;
        } else if (event.type === "blur") {
            document.removeEventListener("keydown", this.keyboardHandler);
            this.constructor.activeInstance = null;
        } else if (event.type === "keydown") {
            if (event.keyCode === 37) this.previousImage();
            if (event.keyCode === 39) this.nextImage();
        } else {
            this.slider.parent().focus();
        }

        return true;
    }
  
  
  swipeStatus(event, phase, direction, distance) {
    //If we are moving before swipe, and we are going L or R in X mode, or U or D in Y mode then drag.
    if (phase == "move" && (direction == "left" || direction == "right")) {
      var duration = 0;

      if (direction == "left") {
        this.scrollImages(
          this.currentImg + 0.0025 * distance,
          duration
        );
      } else if (direction == "right") {
        this.scrollImages(
          this.currentImg - 0.0025 * distance,
          duration
        );
      }
    } else if (phase == "cancel") {
      this.scrollImages(this.currentImg, this.speed);
    } else if (phase == "end") {
      if (direction == "right") {
        this.previousImage();
      } else if (direction == "left") {
        this.nextImage();
      }
    }
  }
  
  
  
  scrollImages(distance, duration) {
        this.slider.css("transition-duration", (duration / 1000).toFixed(1) + "s");
        this.slider.css("transform", "translate(" + (100 * -distance / this.maxImages) + "%,0)");
    }

  previousImage() {
    this.currentImg = Math.max(this.currentImg - 1, 0);
    this.scrollImages(this.currentImg, this.speed);
  }

  nextImage() {
    if ( 0 < ( this.slider.find(">*").length - ( this.slider.parent().width() / this.slider.find(".slide").width() ) )) {
            const maxImages = ( this.slider.find(">*").length - ( this.slider.parent().width() / this.slider.find(".slide").width() ) );
            this.currentImg = Math.min(this.currentImg + 1, maxImages);
            this.scrollImages(this.currentImg, this.speed);
        }
    else {
        this.currentImg = Math.max(this.currentImg - 1, 0);
        this.scrollImages(this.currentImg, this.speed);
    }
  }
  
}

$(() => {
  for (const element of $(".slider")) {
    new Slider(element);
  }
});
  </script>
</head>

<body>
<section>
  <div class="block">
    <div class="slider-box">
      <div class="slider">
        <div class="slide">1 / 3</div>
        <div class="slide">2 / 3</div>
        <div class="slide">3 / 3</div>
      </div>
    </div>
  </div>
</section>
<hr>
</body>
</html>