Создание текстового слайдера с ванильным JS с кликабельными стрелками

Question

Я думаю, что мне нужно где-то использовать цикл, но я не уверен, как перевести его в мой код, поэтому, если кто-то может мне помочь, я был бы признателен.

У меня есть 3 блока текстачто я хочу отобразить при использовании двух стрелок для переключения между текстом.Я решил, что должен использовать «display: none» для 2 блоков текста, которые я не отображаю в данный момент.

Я также понимаю, что, вероятно, мне следует использовать какой-то цикл, связанный с количеством текстовых блоков.что у меня есть, но я не смог перевести это в свой код, так как я все еще новичок в этом.

Я подумал, что могу создать переменные для каждого текстового блока и затем добавить их в массив (даже не уверен, что это разрешено).После этого я бы оценил длину массива, чтобы стрелки нажимали.Я был бы очень признателен, если бы кто-то мог помочь мне с этим!Я также был бы признателен, если бы ответ мог быть дан только на обычном JS.

Вот кодекс: https://codepen.io/ItzaMi/pen/ZPMXYw

var scrollArrowRight = document.getElementById("scroll-arrow-right");
var scrollArrowLeft = document.getElementById("scroll-arrow-left");

var par1 = document.getElementById("p-1");
var par2 = document.getElementById("p-2");
var par3 = document.getElementById("p-3");

var slider = [par1, par2, par3];

scrollArrowRight.onclick = function() {
  par2.style.display = "block";
  par1.style.display = "none";
}

scrollArrowLeft.onclick = function() {
  par2.style.display = "none";
  par3.style.display = "block";
}

#scroll-join {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: row;
}

.scroll-arrow {
  margin: 0 0.6em;
  font-size: 1.4em;
}

#p-2 {
  display: none;
}

#p-3 {
  display: none;
}

<div id="scroll-join">
  <i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left"></i>
  <p class="join-p" id="p-1">WLorem ipsum dolor sit amet.</p>
  <p class="join-p" id="p-2">Lorem ipsum dolor sit amet</p>
  <p class="join-p" id="p-3">WLorem ipsum dolor sit amet.</p>
  <i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right"></i>
</div>

Answer 1

Вот еще один способ реализации слайдера. Определите «текущий индекс», который обновляется при нажатии между слайдами. Поскольку вы используете массив слайдов, я думаю, что это было бы более подходящим.

var scrollArrowRight = document.getElementById("scroll-arrow-right");
var scrollArrowLeft = document.getElementById("scroll-arrow-left");

var par1 = document.getElementById("p-1");
var par2 = document.getElementById("p-2");
var par3 = document.getElementById("p-3");

var slider = [par1, par2, par3];
var currentIndex = -1;

//On load, show the first slide
loadPage(0);

function loadPage(i) {
  //Check if index is valid
  if (slider[i]) {
    slider[i].removeAttribute('hidden');
  } else {
    return;
  }

  //Hide previous slide
  if (slider[currentIndex]) {
    slider[currentIndex].setAttribute('hidden', '');
  }

  currentIndex = i;
}

scrollArrowRight.onclick = function() {
  loadPage(currentIndex + 1);
}

scrollArrowLeft.onclick = function() {
  loadPage(currentIndex - 1);
}

#scroll-join {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: row;
}

.scroll-arrow {
  cursor: pointer;
  margin: 0 0.6em;
  font-size: 1.4em;
}

<div id="scroll-join">
  <i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left">←</i>
  <p class="join-p" id="p-1" hidden>WLorem ipsum dolor sit amet.</p>
  <p class="join-p" id="p-2" hidden>Lorem ipsum dolor sit amet</p>
  <p class="join-p" id="p-3" hidden>WLorem ipsum dolor sit amet.</p>
  <i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right">→</i>
</div>

Answer 2

const [arrowLeft, arrowRight] = document.querySelectorAll(".container .arrow");

const textBoxes = document.querySelectorAll(".text-box");

textBoxes.howFarTranslated = -100;

function handleArrowClick() {
  if (this === arrowLeft && textBoxes.howFarTranslated > -200) {
    textBoxes.howFarTranslated -= 100;
  } else if (this === arrowRight && textBoxes.howFarTranslated < 0) {
    textBoxes.howFarTranslated += 100;
  }

  arrowLeft.disabled = textBoxes.howFarTranslated === -200;
  arrowRight.disabled = textBoxes.howFarTranslated === 0;

  textBoxes.forEach(
    textBox =>
    (textBox.style.transform = `translateX(${textBoxes.howFarTranslated}%)`)
  );
}

[arrowLeft, arrowRight].forEach(arrow =>
  arrow.addEventListener("click", handleArrowClick)
);

body {
  margin: 0;
  padding-top: 64px;
}

body,
body * {
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 50%;
  height: 54px;
  min-width: 320px;
  margin: auto;
}

.container .arrow {
  flex: 1;
  min-width: 64px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
}

.container .arrow:hover:not([disabled]) {
  box-shadow: 0 2px 8px #666;
}

.container .arrow:active {
  transform: scale(0.95);
}

.container .arrow[disabled] {
  opacity: 0.25;
  cursor: initial;
}

.container .display-box {
  flex: 5;
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}

.container .display-box .text-box {
  position: relative;
  z-index: -1;
  display: inline-flex;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: translateX(-100%);
  transition: transform 333ms linear;
}

.container .display-box .text-box p {
  margin: auto;
  font-size: 24px;
}

<div class="container">
  <button class="arrow left-arrow"><</button>
  <div class="display-box">
    <div class="text-box text-0">
      <p>Text 0 text 0 text 0 text 0</p>
    </div>
    <div class="text-box text-1">
      <p>Text 1 text 1 text 1 text 1</p>
    </div>
    <div class="text-box text-2">
      <p>Text 2 text 2 text 2 text 2</p>
    </div>
  </div>
  <button class="arrow right-arrow">></button>
</div>

Answer 3

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

var scrollArrowRight = document.getElementById("scroll-arrow-right");
var scrollArrowLeft = document.getElementById("scroll-arrow-left");

scrollArrowRight.onclick = function() {
  // get current active element
  var active = document.querySelector(".active");
  // add active class to next sibling      
  active.nextElementSibling.classList.add("active");
  // get all active elements
  var allActive = document.querySelectorAll(".active");
  // remove active class from first element
  allActive[0].classList.remove("active");
}

scrollArrowLeft.onclick = function() { 
  // get current active element
  var active = document.querySelector(".active");
  // add active class to previous sibling
  active.previousElementSibling.classList.add("active");
  // get all active elements
  var allActive = document.querySelectorAll(".active");
  // remove active class from second element
  allActive[1].classList.remove("active");
}

#scroll-join {
   display: flex;
   justify-content: center;
   align-content: center;
   align-items: center;
   flex-direction: row;
}

.scroll-arrow {
  margin: 0 0.6em;
  font-size: 1.4em;
}

.join-p {
  display: none; 
 }

.active {
  display: block;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

<div id="scroll-join">
    <i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left"></i>
    <div>
      <p class="join-p active">1 Lorem ipsum dolor amet.</p>
      <p class="join-p">2 Lorem ipsum dolor sit amet</p>
      <p class="join-p">3 Lorem ipsum dolor sit amet</p>
    </div>
    <i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right"></i>
</div>

Надеюсь, это поможет вам начать!