Показать сообщение отдельно
  #6 (permalink)  
Старый 03.06.2019, 22:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

Сообщение от 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>
Ответить с цитированием