БЛОГ НА HUSL


Как добавить точки для переключения слайдов в слайдере на Js(они уже добавлены, нужна функция для их взаимодействия со слайдером)

Автор вопроса: ddd 

let offset = 0;
const sliderLine = document.querySelector('.slider_line');
document.querySelector('.next').addEventListener('click', function() {
  offset += 679;
  if (offset > 1358) {
    offset = 0;
  }
  sliderLine.style.left = -offset + 'px';
});
document.querySelector('.back').addEventListener('click', function() {
  offset -= 679;
  if (offset < 0) {
    offset = 1358;
  }
  sliderLine.style.left = -offset + 'px';
});
@font-face {
  font-family: 'Yeseva One';
  src: url('../css/Yeseva\ One.ttf');
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('../css/Nunito\ Sans.ttf');
}

.section {
  position: absolute;
  background: black;
  width: 99%;
  height: 783px;
}

.navigation {
  margin-right: 121px;
  margin-top: 87px;
  float: right;
}

.div_nav {
  margin-right: 60px;
  display: inline-block;
  margin-right: 60px;
  font-family: 'Yeseva One';
  Size: 14px;
  line-height: 19.4px;
  color: #E3B873;
}

.all_images {
  height: 483px;
  width: 679px;
  float: right;
  margin-right: 135px;
}

.slider {
  width: 679px;
  height: 483px;
  overflow: hidden;
}

.slider_line {
  height: 483px;
  width: 1358px;
  display: flex;
  position: relative;
  left: 0;
  transition: all ease 1s;
}

.image {
  width: 100%;
  height: 100%;
}

.completed {
  font-family: 'Yeseva One';
  font-weight: 400;
  Width: 253px;
  Height: 66px;
  Size: 27px;
  line-height: 37.42px;
  color: #E3B873;
  margin-top: 177px;
  margin-left: 135px;
}

.text {
  font-family: 'Nunito Sans';
  font-weight: 400;
  font-Size: 14px;
  line-height: 26.73px;
  margin-left: 135px;
  color: #FFFFFF;
}

.under_projects {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  grid-template-rows: repeat(2, 100px);
  margin-left: 135px;
}

.under_h {
  font-family: 'Yeseva One';
  font-weight: 400;
  font-size: 18px;
  line-height: 24.95px;
  color: #E3B873;
}

.under_s {
  font-family: 'Nunito Sans';
  font-weight: 400;
  font-size: 13px;
  line-height: 21.28px;
  color: #FFFFFF;
}

.scroll {
  margin-top: 50px;
  margin-left: 135px;
}

.strelka {
  width: 44px;
}

.back {
  cursor: pointer;
  background: none;
  border: none;
  margin-left: -214px;
  width: 46px;
  height: 20px;
}

.next {
  cursor: pointer;
  background: none;
  border: none;
  margin-left: 115px;
  width: 47px;
  height: 20px;
}

.slider_dots {
  position: absolute;
  transform: translateX(-50%);
}

.slider_dot {
  display: inline-block;
  margin: 0 10px;
  width: 10px;
  height: 10px;
  border: 2px solid grey;
  background-color: grey;
  border-radius: 50%;
  outline: none;
}

.slider_dot_active {
  border: 2px solid white;
  background-color: white;
}

.slider_dot:hover,
.slider_dot:focus {
  border-color: white;
  background-color: black;
  transition: all ease 0.7s;
}

.slider_dot_active:hover,
.slider_dot_active:focus {
  transition: all ease 0.5s;
  background-color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/styles.css">
  <title>Слайдер на JS</title>
</head>

<body>
  <section class="section">
    <nav class="navigation">
      <div class="div_nav">Rostov-on-Don, Admiral</div>
      <div class="div_nav">Sochi Thieves</div>
      <div class="div_nav">Rostov-on-Don Patriotic</div>
    </nav>
    <main>
      <div class="all_images">
        <div class="slider">
          <div class="slider_line">
            <img src="../images/image1.png" class="image">
            <img src="../images/image2.png" class="image">
            <img src="../images/image3.png" class="image">
          </div>
        </div>
      </div>
      <h1 class="completed">COMPLETED PROJECTS</h1>
      <p class="text">Only a small part of the work performed by our company is presented on the site. For 14 years on in the construction market we have made happy more than 1000 families</p>
      <div class="under_projects">
        <h2 class="under_h">CITY:<br><span class="under_s">Rostov-on-Don LCD admiral</span></h2>
        <h2 class="under_h">REPAIR TIME:<br><span class="under_s">3.5 months</span></h2>
        <h2 class="under_h">APARTMENT AREA:<br><span class="under_s">81 m2</span></h2>
        <h2 class="under_h">REPAIR COST:<br><span class="under_s">Upon request</span></h2>
      </div>
      <div class="scroll">
        <img src="../images/strelka_l.png" class="strelka">&nbsp;
        <a href="#" class="slider_dot slider_dot_active"></a>
        <a href="#" class="slider_dot"></a>
        <a href="#" class="slider_dot"></a>
        <img src="../images/strelka_r.png" class="strelka">
        <button class="back"></button>
        <button class="next"></button>
      </div>
    </main>
  </section>
  <script src="../js/script.js"></script>
</body>

</html>


Источник

Ответы (1 шт):

Автор решения: Jean-Claude

Простенький вариант для начинающего. Нумеруем каждую кнопку и вешаем на нее слушатель событий, в зависимости от номера точки, двигаем картинку на n-нное количество пикселей.

let offset = 0;
const sliderLine = document.querySelector('.slider_line');

document.querySelector('.next').addEventListener('click', function() {
  offset += 679;
  if (offset > 1358) {
    offset = 0;
  }
  sliderLine.style.left = -offset + 'px';
});

document.querySelector('.back').addEventListener('click', function() {
  offset -= 679;
  if (offset < 0) {
    offset = 1358;
  }
  sliderLine.style.left = -offset + 'px';
});


document.querySelectorAll('.slider_dot').forEach((item, index) => {
  item.setAttribute('data-slider-num', index);
});



document.querySelectorAll('.slider_dot').forEach((element) => {
  element.addEventListener('click', (e) => {
    e.preventDefault();
    sliderLine.style.left = -483 * e.target.getAttribute('data-slider-num') + 'px';
  });
})
.section {
  position: absolute;
  background: black;
  width: 99%;
  height: 783px;
}

.navigation {
  margin-right: 121px;
  margin-top: 87px;
  float: right;
}

.div_nav {
  margin-right: 60px;
  display: inline-block;
  margin-right: 60px;
  font-family: 'Yeseva One';
  Size: 14px;
  line-height: 19.4px;
  color: #E3B873;
}

.all_images {
  height: 483px;
  width: 679px;
  float: right;
  margin-right: 135px;
}

.slider {
  width: 679px;
  height: 483px;
  overflow: hidden;
}

.slider_line {
  height: 483px;
  width: 1358px;
  display: flex;
  position: relative;
  left: 0;
  transition: all ease 1s;
}

.back {
  /*cursor: pointer;*/
  /*background: none;*/
  /*border: none;*/
  /*margin-left: -214px;*/
  width: 44px;
  height: 44px;
}

.next {
  /*cursor: pointer;*/
  /*background: none;*/
  /*border: none;*/
  /*margin-left: 115px;*/
  width: 44px;
  height: 46px;
}

.image {
  width: 100%;
  height: 100%;
}

.completed {
  font-family: 'Yeseva One';
  font-weight: 400;
  Width: 253px;
  Height: 66px;
  Size: 27px;
  line-height: 37.42px;
  color: #E3B873;
  margin-top: 177px;
  margin-left: 135px;
}

.text {
  font-family: 'Nunito Sans';
  font-weight: 400;
  font-Size: 14px;
  line-height: 26.73px;
  margin-left: 135px;
  color: #FFFFFF;
}

.under_projects {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  grid-template-rows: repeat(2, 100px);
  margin-left: 135px;
}

.under_h {
  font-family: 'Yeseva One';
  font-weight: 400;
  font-size: 18px;
  line-height: 24.95px;
  color: #E3B873;
}

.under_s {
  font-family: 'Nunito Sans';
  font-weight: 400;
  font-size: 13px;
  line-height: 21.28px;
  color: #FFFFFF;
}

.scroll {
  margin-top: 50px;
  margin-left: 135px;
}

.strelka {
  width: 44px;
}

.slider_dots {
  position: absolute;
  transform: translateX(-50%);
}

.slider_dot {
  display: inline-block;
  margin: 0 10px;
  width: 10px;
  height: 10px;
  border: 2px solid grey;
  background-color: grey;
  border-radius: 50%;
  outline: none;
}

.slider_dot_active {
  border: 2px solid white;
  background-color: white;
}

.slider_dot:hover,
.slider_dot:focus {
  border-color: white;
  background-color: black;
  transition: all ease 0.7s;
}

.slider_dot_active:hover,
.slider_dot_active:focus {
  transition: all ease 0.5s;
  background-color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/styles.css">
  <title>Слайдер на JS</title>
</head>

<body>
  <section class="section">
    <nav class="navigation">
      <div class="div_nav">Rostov-on-Don, Admiral</div>
      <div class="div_nav">Sochi Thieves</div>
      <div class="div_nav">Rostov-on-Don Patriotic</div>
    </nav>
    <main>
      <div class="all_images">
        <div class="slider">
          <div class="slider_line">
            <img src="https://loremflickr.com/483/483" class="image">
            <img src="https://loremflickr.com/483/483" class="image">
            <img src="https://loremflickr.com/483/483" class="image">
          </div>
        </div>
      </div>
      <h1 class="completed">COMPLETED PROJECTS</h1>
      <p class="text">Only a small part of the work performed by our company is presented on the site. For 14 years on in the construction market we have made happy more than 1000 families</p>
      <div class="under_projects">
        <h2 class="under_h">CITY:<br><span class="under_s">Rostov-on-Don LCD admiral</span></h2>
        <h2 class="under_h">REPAIR TIME:<br><span class="under_s">3.5 months</span></h2>
        <h2 class="under_h">APARTMENT AREA:<br><span class="under_s">81 m2</span></h2>
        <h2 class="under_h">REPAIR COST:<br><span class="under_s">Upon request</span></h2>
      </div>
      <div class="scroll">
        <button class="back"></button>
        <a href="#" class="slider_dot slider_dot_active"></a>
        <a href="#" class="slider_dot"></a>
        <a href="#" class="slider_dot"></a>
        <button class="next"></button>
      </div>
    </main>
  </section>
</body>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.