Форум

DenKuzmin17 · #1 (**permalink**) 03.06.2019, 17:48

Вставляю точки для навигации по слайдам кодом:

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>').join('');

        this.slider.siblings('.slider-pagination').append(html);

Как в этой же строке пронумеровать элементы и записать номера в data-id, чтобы на выходе получить:

<div class="slider-pagination">
   <div class="slider-point" data-id="1"></div>
   <div class="slider-point" data-id="2"></div>
   <div class="slider-point" data-id="3"></div>
   и т.д.
</div>

Dilettante_Pro · #2 (**permalink**) 03.06.2019, 18:24

var html = Array(3).fill('<div class="slider-point" data-id=""></div>').map(fr).join('');
alert(html);
function fr(value, index, array) {
   return value.replace('""', '"' + (index + 1) + '"');
}

рони · #3 (**permalink**) 03.06.2019, 19:26

DenKuzmin17,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider-pagination{
      display: flex;
      justify-content: center;
  }

  [data-id]{
      background-color: hsl(236, 77%, 45%);
       height: 18px;
       width: 18px;
       border-radius: 50%;
       margin: 12px;
       line-height: 18px;
       text-align: center;
       color: hsl(0, 0%, 100%);
  }
  [data-id]:hover:after{
      content: attr(data-id);
      font-size: 12px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    const slider = $("#slider"),
        length = slider.find('.slide').length,
        html = Array.from({length}, (v, k) => `<div class="slider-point" data-id="${++k}"></div>`),
        parent = slider.parent().append('<div class="slider-btn previous"></div><div class="slider-btn next"></div><div class="slider-pagination"></div>');
    $(".slider-pagination", parent).append(html)
});
  </script>
</head>

<body>
<div id="box">
<div id="slider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
</div>
</div>
</body>
</html>

DenKuzmin17 · #4 (**permalink**) 03.06.2019, 22:05

Спасибо. А без jq?

рони · #5 (**permalink**) 03.06.2019, 22:29

DenKuzmin17,
https://learn.javascript.ru/searching-elements-dom
https://learn.javascript.ru/multi-insert

рони · #6 (**permalink**) 03.06.2019, 22:45

Сообщение от DenKuzmin17

А без jq?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider-pagination{
      display: flex;
      justify-content: center;
  }

  [data-id]{
      background-color: hsl(236, 77%, 45%);
       height: 18px;
       width: 18px;
       border-radius: 50%;
       margin: 12px;
       line-height: 18px;
       text-align: center;
       color: hsl(0, 0%, 100%);
  }
  [data-id]:hover:after{
      content: attr(data-id);
      font-size: 12px;
  }

  </style>

  <script>
document.addEventListener("DOMContentLoaded", () => {
   const slider = document.querySelector("#slider"),
        length = slider.querySelectorAll('.slide').length,
        html = Array.from({length}, (v, k) => `<div class="slider-point" data-id="${++k}"></div>`);
        slider.parentNode.insertAdjacentHTML('beforeEnd', `<div class="slider-btn previous"></div><div class="slider-btn next"></div><div class="slider-pagination">${html.join('')}</div>`);
})

  </script>
</head>

<body>
<div id="box">
<div id="slider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
</div>
</div>
</body>
</html>

DenKuzmin17 · #7 (**permalink**) 04.06.2019, 09:22

Спасибо большое!

Буду изучать доки.

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>

рони · #9 (**permalink**) 04.06.2019, 11:29

DenKuzmin17,

function fr(value, index, array) {
             return value.replace('""', '"' + index  + '"');
          }

this.sliderPoint.on("click", function (event) {
      event.stopPropagation();
      this.currentImg = event.target.dataset.id;
      this.scrollImages(this.currentImg, this.speed);
    }.bind(this));

DenKuzmin17 · #10 (**permalink**) 04.06.2019, 11:52

Спасибо. Подсказали ещё такое решение.

this.sliderPoint.on('click', e => {
      this.currentImg = e.target.dataset.id;
      this.scrollImages(this.currentImg, this.speed);
    });

Форум

Справочник

Discord чат

Курсы javascript