title: Creating a text slider with vanilla JS with clickable arrows
body: <p>I think I need to use a loop somewhere but I'm not sure on how to translate it to my code so if someone could help me, I would appreciate it.</p>
  
  <p>I have 3 blocks of text that I want to display while using two arrows to switch between the text. I figured that I should use "display: none" for the 2 blocks of text that I'm not currently displaying.</p>
  
  <p>I also realize that I should probably use some kind of loop related with the number of text blocks that I have but I've not been able to translate that into my code since I'm fairly new to this still.</p>
  
  <p>Figured I could create the variables for each text block and then add them to an array (not even sure if that's allowed). After that I would evaluate the .length of the array to make the arrows click.
  I would very much appreciate if someone could help me with this! I would also appreciate if the answer could be given in regular JS only.</p>
  
  <p>Here's the codepen: <a href="https://codepen.io/ItzaMi/pen/ZPMXYw" rel="nofollow noreferrer">https://codepen.io/ItzaMi/pen/ZPMXYw</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="scroll-join"&gt;
    &lt;i class="fas fa-caret-left scroll-arrow" id="scroll-arrow-left"&gt;&lt;/i&gt;
    &lt;p class="join-p" id="p-1"&gt;WLorem ipsum dolor sit amet.&lt;/p&gt;
    &lt;p class="join-p" id="p-2"&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
    &lt;p class="join-p" id="p-3"&gt;WLorem ipsum dolor sit amet.&lt;/p&gt;
    &lt;i class="fas fa-caret-right scroll-arrow" id="scroll-arrow-right"&gt;&lt;/i&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>