БЛОГ НА HUSL


Как сделать слайдер на кнопках (button)

Автор вопроса: dark.climate

блок со слайдером

Нужно чтобы при нажатии на button появлялась картинка. Решил попробовать просто добавлять и убирать display none, но картинки конфликтуют и налаживаются одна на другую. Тогда я добавил ко всем кнопкам одинаковый id и также добавил к оранжевым кнопкам. То есть нужно чтобы одна картинка появлялась, а другая исчезала, при этом каждый раз возвращалась в none, то есть в исходное положение, чтобы была показана одна текущая картинка.

Код:

/*Попробовал получить все кнопки и прибавлять большее и меньшее значение, чтобы за счет этого одна картинка пропадала, а другая появлялась, чтобы она как-бы сравнивала числа, и понимала, что выводить на экран*/
let i = 0;
let slider_img = document.getElementById("button_slider")
slider_img.addEventListener("click", {
  while (i) {
    i = 0
    i <= 1
    i++;
  }
});
/*Некоторые общие стили*/
.line {display: flex;align-items: center;justify-content: space-between;}
.flex {display: flex;}.center {align-items: center;}
/* */ /* */ /* */ /* *//* */ /* */ /* */ /* */ /* */
/*Кнопки*/
.photos__button:nth-child(2) {
  margin: 6px 0;
}
.photos__button {
  font-size: 14px;
  font-family: g700;
  line-height: 20px;
  color: #282828;
  background-color: white;
  border: 1px solid #d7e5f2;
  border-radius: 6px;
  padding: 18px 24px;
  width: 280px;
  text-transform: uppercase;
  text-align: start;
  transition: 0.5s;
}
.photos__button:hover {
  background: #d7e5f2;
}
.photos__button img {
  margin: 0 17px 0 0;
}
/*Картинки*/
#slide {
  background-image: url(/img/Rectangle\ 385.jpg);
  width: 1160px;
  height: 560px;
  margin: 40px 0 65px 0;
}
/*Левая и правая кнопки*/
.button_slider {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  position: absolute;
  padding: 0 0 400px 0;
  top: 9200px;
}
.button_slider div {
  background-color: #fb9514;
  border-radius: 50px;
  padding: 11px 15px;
  width: 40px;
  height: 40px;
}
<!--Кнопки. Они одинаковые, поэтому хватит только четыре.-->
<div class="line">
  <button id="button_slider" class="photos__button flex center">
    <img src="/img/video.png">загрузка в контейнер
  </button>
  <button id="button_slider" class="photos__button flex center">
    <img src="/img/video.png">фундаменты большие
  </button>
  <button id="button_slider" class="photos__button flex center">
    <img src="/img/video.png">загрузка в вагон
  </button>
  <button id="button_slider" class="photos__button flex center">
    <img src="/img/video.png">упаковка опор
  </button>
</div>
<!--Картинки слайдера-->
<div id="slider">
  <div id="slide">
    <span style="padding: 10px">ЗАГРУЗКА В КОНТЕЙНЕР</span>
  </div>
  <div id="slide">
    <span style="padding: 10px">ФУНДАМЕНТЫ БОЛЬШИЕ</span>
  </div>
  <div id="slide">
    <span style="padding: 10px">ЗАГРУЗКА В ВАГОН</span>
  </div>
  <div id="slide">
    <span style="padding: 10px">УПАКОВКА ОПОР</span>
  </div>
</div>
<!--Левая и правая оранжевая кнопка для переключения-->
<div class="button_slider line">
  <div onclick="back_Slide()" id="slide-left">
    <img src="/img/Vector 6-1.png">
  </div>
  <div onclick="next_Slide()" id="slide-right">
    <img src="/img/Vector 6.png">
  </div>
</div>


Источник

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

Автор решения: NDMX

id это уникальные значения, нельзя делать их одинаковыми.

Я не понял что у Вас написано в JS, поэтому предложу свой вариант.

Для начала создадим простейший слайдер:

<div class="slider">
    <div class="slider__img slider__img_active"><img src="" alt=""></div>
    <div class="slider__img slider__img_active"><img src="" alt=""></div>
    <div class="slider__img slider__img_active"><img src="" alt=""></div>
    <div class="slider__img slider__img_active"><img src="" alt=""></div>
    
    <button id="btnLeft" class="slider__btn slider__btn_left">Left</button>
    <button id="btnRight" class="slider__btn slider__btn_right">Right</button>
</div>

Далее сделаем возможность переключения по стрелкам. Инициализируем переменные:

let btnLeft = document.getElementById('btnLeft');
let btnRight = document.getElementById('btnRight');
let slides = document.getElementsByClassName('slider__img');
let currentSlide = 0;

Изначально наши слайды имеют diplay: none;. Создадим функцию переключения слайдов, которая принимает значение индекса нового слайда и добавляет ему класс с display: block;, а у остальных убираем этот класс:

function slideSwitch(slideNumber) {        
    for (let i=0; i<slides.length; i++) {
        if (i != slideNumber) {
            slides[i].classList.remove('slider__img_active');
        } else {
            slides[i].classList.add('slider__img_active');
        }
    }
}

При клике по стрелочкам будем изменять значение текущего слайда на следующий или предыдущий. Также необходимо добавить проверку, что если новое значение слайда меньше нуля, то новым слайдом будет последний слайд, и наоборот. Сделаем это:

function validSlideNumberCheck(slideNumber) {
    let validNumber = slideNumber;

    if (slideNumber < 0) {
        validNumber = slides.length - 1;
    } else if (slideNumber > slides.length - 1) {
        validNumber = 0;
    }

    currentSlide = validNumber;

    return currentSlide;
}

btnLeft.onclick = function(){
    let newSlide = currentSlide - 1;
    slideSwitch(validSlideNumberCheck(newSlide));
}

btnRight.onclick = function(){
    let newSlide = currentSlide + 1;
    slideSwitch(validSlideNumberCheck(newSlide));
}

Простейший слайдер готов, теперь разберемся с кнопками. Например эту задачу можно решить с использованием data атрибутов. Вешаем на кнопки атрибуты data-name с необходимыми значениями, а потом и на на наши слайды вешаем атрибуты с такими же значениями, чтобы связать кнопки со слайдами. Ну и необходимо добавить событие клика по кнопкам, при котором мы будем получать значение data атрибута нажатой кнопки и передавать его в нашу функцию переключения слайдов. Саму функцию тоже немного дополним, чтобы она могла принимать эти значения data атрибутов кнопок и находить такие же значения у слайдов.

Рабочий вариант выглядит так:

let btnLeft = document.getElementById('btnLeft');
let btnRight = document.getElementById('btnRight');
let slides = document.getElementsByClassName('slider__img');
let currentSlide = 0;

let buttons = document.getElementsByClassName('cats__item');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    slideSwitch(buttons[i].dataset.name)
  });
}

function slideSwitch(slideNumber) {
  if (typeof slideNumber === 'number') {
    for (let i = 0; i < slides.length; i++) {
      if (i != slideNumber) {
        slides[i].classList.remove('slider__img_active');
      } else {
        slides[i].classList.add('slider__img_active');
      }
    }
  } else {
    for (let i = 0; i < slides.length; i++) {
      if (slides[i].dataset.name != slideNumber) {
        slides[i].classList.remove('slider__img_active');
      } else {
        slides[i].classList.add('slider__img_active');
      }
    }
  }
}

function validSlideNumberCheck(slideNumber) {
  let validNumber = slideNumber;

  if (slideNumber < 0) {
    validNumber = slides.length - 1;
  } else if (slideNumber > slides.length - 1) {
    validNumber = 0;
  }

  currentSlide = validNumber;

  return currentSlide;
}

btnLeft.onclick = function() {
  let newSlide = currentSlide - 1;
  slideSwitch(validSlideNumberCheck(newSlide));
}

btnRight.onclick = function() {
  let newSlide = currentSlide + 1;
  slideSwitch(validSlideNumberCheck(newSlide));
}
.cats {
  margin-bottom: 20px;
}

.cats__item {
  display: inline-block;
  padding: 10px 20px;
  background-color: rgba(0, 137, 255, 0.13);
  cursor: pointer;
  transition: all .3s linear;
}

.cats__item:hover {
  background-color: rgba(0, 137, 255, 0.3);
}

.slider {
  position: relative;
  outline: 2px solid black;
  height: 400px;
}

.slider__btn {
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  top: 50%;
  transform: translate(0, -50%);
  width: 30px;
  height: 30px;
  z-index: 2;
  font-size: 0;
  border: none;
  border-radius: 100%;
  background-image: url(https://cdn.icon-icons.com/icons2/1365/PNG/512/next7_89412.png);
  background-size: 60%;
  background-position: 60% 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all .3s linear;
}

.slider__btn:hover {
  background-color: white;
}

.slider__btn_left {
  left: 0;
  transform: rotate(180deg);
}

.slider__btn_right {
  right: 0;
}

.slider__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}

.slider__img_active {
  display: block;
}

.slider__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
<div class="cats">
  <div class="cats__item" data-name="cat">Котик</div>
  <div class="cats__item" data-name="cats">Котики</div>
  <div class="cats__item" data-name="cat2">Еще котик</div>
  <div class="cats__item" data-name="cat3">И еще один</div>
</div>

<div class="slider">
  <div class="slider__img slider__img_active" data-name="cat"><img src="https://cdnstatic.rg.ru/uploads/images/168/10/26/kotik_d_850.jpg" alt=""></div>
  <div class="slider__img" data-name="cats"><img src="https://cdnn21.img.ria.ru/images/07e5/0a/0b/1753974972_0:117:3072:1845_1920x0_80_0_0_5fbad162a71b5c081cc51da0a8ed6f27.jpg" alt=""></div>
  <div class="slider__img" data-name="cat2"><img src="https://ichef.bbci.co.uk/news/640/cpsprodpb/12CBE/production/_117309967_neo4_976.jpg" alt=""></div>
  <div class="slider__img" data-name="cat3"><img src="https://moika78.ru/news2/2020/03/cat-2934720_1280-1024x682.jpg" alt=""></div>

  <button id="btnLeft" class="slider__btn slider__btn_left">Left</button>
  <button id="btnRight" class="slider__btn slider__btn_right">Right</button>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.