Как я могу скрыть все слайды и отобразить текущий в JavaScript?

Question

Как я могу скрыть все слайды и отобразить текущий в JavaScript?

1

Я создаю слайдер в Vanilla JavaScript.

У меня есть базовая основа.

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

Я пробовал несколько вещей, но и не работал.

Вот код: https://codepen.io/Aurelian/pen/LBGWpd?editors=0010

// Problem: Make the slides slide one after another
// and make the buttons work prev and next to bring prev or next slide

// Solution
// Select all slides
// On next/prev, get the left/right animate from 0 to 100 or from 0 to -100%
// On button press, get the prev/next parent node
// Add active class on the shown 

// Solution Part 2
// Select all slides
// Get the length of the slides
// Display none on every slideItem
// Get the current slide 
// Display block/flex on current slide
// On next, advance the slider index by 1
// On prev, advance the slider index by -1
// Make the slider slide every 3sec with setInterval
// Even listener on slider mousehover, stop the autoslide and add "PAUSED" HTML - add 
// On live the slder, unpause and remove the HTML "PAUSED"



document.addEventListener('DOMContentLoaded', function() {

  var slider = document.querySelector(".slider"),
    sliderList = document.querySelector(".slider__list"),
    sliderItems = document.querySelectorAll(".slider__item"),
    sliderBtnPrev = document.querySelector(".slider__buttons--prev"),
    sliderBtnNext = document.querySelector(".slider__buttons--next"),
    sliderItemsLength = sliderItems.length,
    currentIndex = 0,
    isPaused = false;

  function prevSlide() {
    sliderItems[currentIndex].classList.remove('is-active');
    currentIndex = (currentIndex + sliderItemsLength - 1) % sliderItemsLength;
    sliderItems[currentIndex].classList.add('is-active');
  }

  function nextSlide() {
    sliderItems[currentIndex].classList.remove('is-active');
    currentIndex = (currentIndex + 1) % sliderItemsLength;
    sliderItems[currentIndex].classList.add('is-active');
  }

  function advance() {
    isPaused = false;
    if ((isPaused = false) = 1) {
      setInterval(function() {
        nextSlide();
      }, 3000);
    }
  }

  sliderBtnPrev.addEventListener('click', function() {
    prevSlide();
  });

  sliderBtnNext.addEventListener('click', function() {
    nextSlide();
  });

  slider.addEventListener('mouseover', function() {
    isPaused = true;
  });
  slider.addEventListener('mouseout', function() {
    isPaused = false;
  });



  advance();

  // On press next, change slide
  // sliderItems.forEach(function(sliderItem) {
  //    sliderItem.style.display = "none";
  // });

  //    function prevSlide() {
  //       console.log('prev slide');
  //    }

  //    function nextSlide() {
  //       console.log('next slide');


  //       // if (currentIndex) {
  //          // console.log(sliderItems[currentIndex])
  //       // }
  //       // sliderItemsLength.push[1];

  //       // currentIndex + 1;
  //       // console.log(currentIndex < (sliderItemsLength + 1));
  //       // console.log(sliderItems[currentIndex + 1])
  //       // if (sliderItemsLength < -1) {
  //       //    sliderItemsLength++;
  //       // }
  //       // if (currentIndex < (sliderItemsLength + 1)) {
  //       //     sliderItems[currentIndex].classList.add('is-active');
  //       // }
  //       // if (numbers.length > 3) {
  //       //   numbers.length = 3;
  //       // }
  //       // myArray[myArray.length - 1] + 1
  //       if (currentIndex < (sliderItemsLength + 1)) {
  //          sliderItems[currentIndex].classList.add('is-active');
  //          currentIndex++;
  //       } else {
  //          sliderItems.style.display = "none";
  //       }
  //    }



});

* {
  box-sizing: border-box;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider {
  position: relative;
  height: 350px;
  width: 100%;
}

.slider__list {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.slider__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
}

.slider__item.is-active {
  display: flex;
}

.slider__item:first-child {
  background-color: orange;
}

.slider__item:nth-child(2) {
  background-color: gold;
}

.slider__item:last-child {
  background-color: green;
}

.slider__title {
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

.slider__buttons {
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
}

.slider__buttons--prev {
  height: 40px;
  width: 40px;
  background-color: red;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  margin: auto;
  top: 0;
  left: 30px;
}

.slider__buttons--next {
  height: 40px;
  width: 40px;
  background-color: red;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  right: 30px;
}

<div class="container">
  <div class="slider">

    <ul class="slider__list">
      <li class="slider__item is-active">
        <span class="slider__title">1</span>
      </li>
      <li class="slider__item">
        <span class="slider__title">2</span>
      </li>
      <li class="slider__item">
        <span class="slider__title">3</span>
      </li>
    </ul>

    <div class="slider__buttons">
      <span class="slider__buttons--prev"></span>
      <span class="slider__buttons--next"></span>
    </div>

    <!--    <ul class="slider__nav">
      <li class="slider__nav-item"></li>
      <li class="slider__nav-item"></li>
      <li class="slider__nav-item"></li>
   </ul> -->

  </div>
</div>

Aurelian Spodarec 16 июль 2018, в 15:19

Источник

0

Привет, одна возможность для достижения этой цели заключается в overflow: hidden родительский контейнер слайда, а затем перемещать слайды вперед и назад
t3__rry 16 июль 2018, в 13:31
0

Да, но как мне это сделать в JS? Прямо сейчас активный класс повсюду. Дисплей: нет / блок будет делать сейчас, пока он работает. Я пытаюсь выяснить, как я могу сделать отображение текущего и скрыть другие.
Aurelian Spodarec 16 июль 2018, в 13:32

Теги:

javascript

javascript-events

1 ответ

Ещё вопросы

Привет, одна возможность для достижения этой цели заключается в overflow: hidden родительский контейнер слайда, а затем перемещать слайды вперед и назад
Да, но как мне это сделать в JS? Прямо сейчас активный класс повсюду. Дисплей: нет / блок будет делать сейчас, пока он работает. Я пытаюсь выяснить, как я могу сделать отображение текущего и скрыть другие.

Hyyan Abo Fakher · Accepted Answer · 2018-07-16T10-51-00.000Z

Вам нужно скрыть все слайды по умолчанию display: none определяет, что класс is-active чтобы изменить display на flex
Начать отсчет с -1
Формула для расчета следующего слайда:

(currentIndex + 1)% sliderItemsLength

Формула для расчета превью слайда:

(currentIndex + sliderItemsLength - 1)% sliderItemsLength

document.addEventListener('DOMContentLoaded', function() {

  var sliderList = document.querySelector(".slider__list"),
    sliderItems = document.querySelectorAll(".slider__item"),
    sliderBtnPrev = document.querySelector(".slider__buttons--prev"),
    sliderBtnNext = document.querySelector(".slider__buttons--next"),
    sliderItemsLength = sliderItems.length,
    currentIndex = -1;

  function prevSlide() {
    sliderItems[currentIndex].classList.remove('is-active');
    currentIndex = (currentIndex + sliderItemsLength - 1) % sliderItemsLength;
    sliderItems[currentIndex].classList.add('is-active');
  }

  function nextSlide() {


    if (currentIndex > 0) sliderItems[currentIndex].classList.remove('is-active');
    else sliderItems[0].classList.remove('is-active');

    currentIndex = (currentIndex + 1) % sliderItemsLength;
    sliderItems[currentIndex].classList.add('is-active');
  }

  sliderBtnPrev.addEventListener('click', function() {
    prevSlide();
  });

  sliderBtnNext.addEventListener('click', function() {
    nextSlide();
  });

  nextSlide();

});

* {
  box-sizing: border-box;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider {
  position: relative;
  height: 350px;
  width: 100%;
}

.slider__list {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.slider__item {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  height: 100%;
  width: 100%;
  position: absolute;
}

.slider__item.is-active {
  display: flex;
}

.slider__item:first-child {
  background-color: orange;
}

.slider__item:nth-child(2) {
  background-color: red;
}

.slider__item:last-child {
  background-color: green;
}

.slider__title {
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

.slider__buttons {
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
}

.slider__buttons--prev {
  height: 40px;
  width: 40px;
  background-color: red;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  margin: auto;
  top: 0;
  left: 30px;
}

.slider__buttons--next {
  height: 40px;
  width: 40px;
  background-color: red;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  right: 30px;
}

<div class="container">
  <div class="slider">

    <ul class="slider__list">
      <li class="slider__item">
        <span class="slider__title">1</span>
      </li>
      <li class="slider__item">
        <span class="slider__title">2</span>
      </li>
      <li class="slider__item">
        <span class="slider__title">3</span>
      </li>
    </ul>

    <div class="slider__buttons">
      <span class="slider__buttons--prev"></span>
      <span class="slider__buttons--next"></span>
    </div>

    <!--    <ul class="slider__nav">
      <li class="slider__nav-item"></li>
      <li class="slider__nav-item"></li>
      <li class="slider__nav-item"></li>
   </ul> -->

  </div>
</div>

Как насчет того, чтобы убрать активный класс с «не текущего» слайда?
@ AurelianSpodarec проверьте код, он удаляется до вычисления позиции слайда
Ах да, но я думаю, что вы добавили эту часть после. Не имеет значения Так как именно это работает? (currentIndex + 1)% sliderItemsLength CurrentIndex, равное 0 + 1, будет увеличивать его в массиве. Модули? как это работает в этой ситуации? Не могли бы вы проработать логику кнопки «предыдущий / следующий», пожалуйста.
@AurelianSpodarec мы начинаем считать с -1 поэтому (-1 + 1) % 3 равно 0 и т. Д. Когда currentIndex больше, чем длина слайдов (2 + 1) % 3 формула вернет 0 чтобы перезапустить цикл, тот же принцип применяется для предыдущей формулы
Ах хорошо. Я не очень хорошо знаю математику, но это имеет смысл, да. Знаете ли вы, что не так в моем новом коде с точки зрения того, почему он не останавливается?