title: How do I add transitions between images in an array
body: <p>Just wanted to know how I could add any transitions, like crossfade or slider, between each image in the array when I click the next button and the previous button. I thought of using JQuery but I've no idea how to implement it into this script was given this and told to add transitions between images for homework. Searched all over the internet but most of them are overlaying images and fading the top into the other and none of them uses array so I didn't know how to integrate it into this code would be nice if someone can give some advice :D<br>
  <strong>HTML</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset = &quot;UTF-8&quot;&gt;
  &lt;title&gt;Project&lt;/title&gt;
  &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
  &lt;script src=&quot;javascript.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;container&quot;&gt;
      &lt;h1&gt;Computer Accessories&lt;/h1&gt;
      &lt;div id=&quot;container_thumbnail&quot;&gt;
          &lt;img id=&quot;thumbnail_razer&quot; src=&quot;images/razer/razer_logo.jpg&quot; onclick=&quot;previewRazer();&quot; alt=&quot;Razer Logo&quot;&gt;
          &lt;img id=&quot;thumbnail_steelseries&quot; src=&quot;images/steelseries/Steelseries_logo.png&quot; onclick=&quot;previewSteelseries();&quot; alt=&quot;SteelSeries Logo&quot;&gt;
          &lt;img id=&quot;thumbnail_logitech&quot; src=&quot;images/logitech/logitech_logo.png&quot; onclick=&quot;previewLogitech();&quot; alt=&quot;Logitech Logo&quot;&gt;
          &lt;img id=&quot;thumbnail_corsair&quot; src=&quot;images/corsair/corsair_logo.jpg&quot; onclick=&quot;previewCorsair();&quot; alt=&quot;Corsair Logo&quot;&gt;
      &lt;/div&gt;
      &lt;h1 id=&quot;pageHeader&quot;&gt;&lt;/h1&gt;
      &lt;div id=&quot;container_slider&quot;&gt;
          &lt;img id=&quot;slider&quot; src=&quot;images/menu_preview.jpeg&quot; alt=&quot;Menu Preview&quot;&gt;
          &lt;div id=&quot;previousPosition&quot;&gt;
              &lt;a href=&quot;#&quot; onclick=&quot;return previous();&quot; class=&quot;previous round&quot;&gt;&amp;#8249;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id=&quot;nextPosition&quot;&gt;
              &lt;a href=&quot;#&quot; onclick=&quot;return next();&quot; class=&quot;next round&quot;&gt;&amp;#8250;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id=&quot;startStopBut&quot; class=&quot;playpause&quot;&gt;
              &lt;input type=&quot;checkbox&quot; class=&quot;SSbuttons&quot; name=&quot;check&quot; id=&quot;playpause&quot; value=&quot;None&quot; onclick=&quot;startSlideShow();&quot;&gt;
              &lt;label for=&quot;playpause&quot; tabindex=1&gt;&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>/* CSS Document */
  #cotainer {
      width: 1200px;
      margin-left: auto;
      margin-right: auto;
  }
  
  #container_thumbnail {
      width: 702px;
      margin-left: auto;
      margin-right: auto;
  }
  
  #thumbnail_razer {
      margin: 30px;
      width: 100px;
      height: 100px;
      border: 5px solid #17D76B;
  }
  
  #thumbnail_steelseries {
      margin: 30px;
      width: 100px;
      height: 100px;
      border: 5px solid #fc8403;
  }
  
  #thumbnail_logitech {
      margin: 30px;
      width: 100px;
      height: 100px;
      border: 5px solid #3483eb;
  }
  
  #thumbnail_corsair {
      margin: 30px;
      width: 100px;
      height: 100px;
      border: 5px solid #fbff0f;
  }
  
  h1 {
      color: #2A2929;
      text-align: center;
  }
  
  #container_slider {
      width: 800px;
      height: 400px;
      margin-left: auto;
      margin-right: auto;
  }
  
  #slider {
      width: 800px;
      height: 400px;
  }
  
  a {
      text-decoration: none;
      display: inline-block;
      padding: 8px 16px;
  }
  
  a:hover {
      background-color: #ddd;
      color: black;
  }
  
  .previous {
      background-color: #ef42f5;
      color: black;
  }
  
  .next {
      background: #ef42f5;
      color: black;
  }
  
  .round {
      border-radius: 50%;
  }
  
  #nextPosition {
      position: relative;
      left: 94%;
      bottom: 63%;
  }
  
  #previousPosition {
      position: relative;
      left: 1%;
      bottom: 55%;
  }
  
  #startStopBut {
      position: relative;
      top: -15%;
      left: 13%;
      width: 230px;
      margin-left: auto;
      margin-right: auto;
  }
  
  .SSbuttons {
      height: 25px;
      width: 100px;
      border-radius: 8px;
      margin: 5px;
  }
  
  /* Fading animation */
  .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 3s;
      animation-name: fade;
      animation-duration: 3s;
  }
  
  @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
  }
  
  @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
  }
  
  .container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
  }
  
  .playpause label {
      display: block;
      box-sizing: border-box;
      width: 0;
      height: 74px;
      border-color: transparent transparent transparent #202020;
      transition: 100ms all ease;
      cursor: pointer;
      border-style: solid;
      border-width: 37px 0 37px 60px;
  }
  
  .playpause input[type=&quot;checkbox&quot;] {
      position: absolute;
      left: -9999px;
  }
  
  .playpause input[type=&quot;checkbox&quot;]:checked + label {
      border-style: double;
      border-width: 0px 0 0px 60px;
  }
  </code></pre>
  <p><strong>JAVASCRIPT</strong></p>
  <pre><code>var index, timer, currentBrand;
  index = 0;
  currentBrand = 0;
  var gallery = new Array();
  function loadImagesRazer() {
      gallery[0] = &quot;images/razer/razer_1.png&quot;;
      gallery[1] = &quot;images/razer/razer_2.jpg&quot;;
      gallery[2] = &quot;images/razer/razer_3.jpg&quot;;
      gallery[3] = &quot;images/razer/razer_4.png&quot;;
  }
  function loadImagesSteelseries() {
      gallery[0] = &quot;images/steelseries/SS_1.jpg&quot;;
      gallery[1] = &quot;images/steelseries/SS_2.jpg&quot;;
      gallery[2] = &quot;images/steelseries/SS_3.jpg&quot;;
      gallery[3] = &quot;images/steelseries/SS_4.png&quot;;
  }
  function loadImagesLogitech() {
      gallery[0] = &quot;images/logitech/logitech_1.jpg&quot;;
      gallery[1] = &quot;images/logitech/logitech_2.jpg&quot;;
      gallery[2] = &quot;images/logitech/logitech_3.jpg&quot;;
      gallery[3] = &quot;images/logitech/logitech_4.jpg&quot;;
  }
  function loadImagesCorsair() {
      gallery[0] = &quot;images/corsair/corsair_1.jpg&quot;;
      gallery[1] = &quot;images/corsair/corsair_2.jpg&quot;;
      gallery[2] = &quot;images/corsair/corsair_3.jpg&quot;;
      gallery[3] = &quot;images/corsair/corsair_4.jpg&quot;;
  }
  function loadCurrentBrandImages() {
      if(currentBrand == &quot;Razer&quot;) {
          loadImagesRazer();
      }
      if(currentBrand == &quot;Steelseries&quot;) {
          loadImagesSteelseries();
      }
      if(currentBrand == &quot;Logitech&quot;) {
          loadImagesLogitech();
      }
      if(currentBrand == &quot;Corsair&quot;) {
          loadImagesCorsair();
      }
  }
  function startRazer() {
      clearTimeout(timer);
      loadImagesRazer();
      document.body.style.backgroundColor = &quot;#47e10c&quot;;
      currentBrand = &quot;Razer&quot;;
      document.getElementById(&quot;pageHeader&quot;).innerHTML = &quot;Razer&quot;;
      document.getElementById('slider').src = gallery[index];
      document.getElementById('slider2').src = gallery[index+1];
      index = index + 1;
      if(index &gt;= gallery.length) {
          index = 0;
      }
      timer = setTimeout(&quot;startRazer();&quot;, 5000);
  }
  function startSteelseries() {
      clearTimeout(timer);
      loadImagesSteelseries();
      document.body.style.backgroundColor = &quot;#da680f&quot;;
      currentBrand = &quot;Steelseries&quot;;
      document.getElementById(&quot;pageHeader&quot;).innerHTML = &quot;Steelseries&quot;;
      document.getElementById('slider').src = gallery[index];
      index = index + 1;
      if(index &gt;= gallery.length) {
          index = 0;
      }
      timer = setTimeout(&quot;startSteelseries();&quot;, 5000);
  }
  function startLogitech() {
      clearTimeout(timer);
      loadImagesLogitech();
      document.body.style.backgroundColor = &quot;#0064ff&quot;;
      currentBrand = &quot;Logitech&quot;;
      document.getElementById(&quot;pageHeader&quot;).innerHTML = &quot;Logitech&quot;;
      document.getElementById('slider').src = gallery[index];
      index = index + 1;
      if(index &gt;= gallery.length) {
          index = 0;
      }
      timer = setTimeout(&quot;startLogitech();&quot;, 5000); 
  }
  function startCorsair() {
      clearTimeout(timer);
      loadImagesCorsair();
      document.body.style.backgroundColor = &quot;#fffeba&quot;;
      currentBrand = &quot;Corsair&quot;;
      document.getElementById(&quot;pageHeader&quot;).innerHTML = &quot;Corsair&quot;;
      document.getElementById('slider').src = gallery[index];
      index = index + 1;
      if(index &gt;= gallery.length) {
          index = 0;
      }
      timer = setTimeout(&quot;startCorsair();&quot;, 5000);
  }
  function previewRazer() {
      clearTimeout(timer);
      document.getElementById(&quot;pageHeader&quot;).innerHTML = &quot;Razer&quot;;
      var element = document.getElementById(&quot;slider&quot;);
      element.classList.add(&quot;fade&quot;);
      document.body.style.backgroundColor = &quot;#47e10c&quot;;
      document.getElementById('slider').src = &quot;images/razer/razer_1.png&quot;;
      currentBrand = &quot;Razer&quot;;
  }
  function previewSteelseries() {
      clearTimeout(timer);
      document.getElementById(&quot;pageHeader&quot;).innerHTML = &quot;Steelseries&quot;;
      var element = document.getElementById(&quot;slider&quot;);
      element.classList.add(&quot;fade&quot;);
      document.body.style.backgroundColor = &quot;#da680f&quot;;
      document.getElementById('slider').src = &quot;images/steelseries/SS_1.jpg&quot;;
      currentBrand = &quot;Steelseries&quot;;
  }
  function previewLogitech() {
      clearTimeout(timer);
      document.getElementById(&quot;pageHeader&quot;).innerHTML = &quot;Logitech&quot;;
      var element = document.getElementById(&quot;slider&quot;);
      element.classList.add(&quot;fade&quot;);
      document.body.style.backgroundColor = &quot;#0064ff&quot;;
      document.getElementById('slider').src = &quot;images/logitech/logitech_1.jpg&quot;;
      currentBrand = &quot;Logitech&quot;;
  }
  function previewCorsair() {
      clearTimeout(timer);
      document.getElementById(&quot;pageHeader&quot;).innerHTML = &quot;Corsair&quot;;
      var element = document.getElementById(&quot;slider&quot;);
      element.classList.add(&quot;fade&quot;);
      document.body.style.backgroundColor = &quot;#fffeba&quot;;
      document.getElementById('slider').src = &quot;images/corsair/corsair_1.jpg&quot;;
      currentBrand = &quot;Corsair&quot;;
  }
  function previous() {
      loadCurrentBrandImages();
      clearTimeout(timer);
      if(currentBrand == 0) {
          previewRazer();
      } else {
          index = index - 1;
          if(index &lt; 0) {
              index = gallery.length - 1;
          }
          document.getElementById('slider').src = gallery[index];
      }
  }
  function next() {
      loadCurrentBrandImages();
      clearTimeout(timer);
      if(currentBrand == 0) {
          previewCorsair();
      } else {
          index = index + 1;
          if(index &gt;= gallery.length) {
              index = 0;
          }
          document.getElementById('slider').src = gallery[index];
      }
  }
  function stopSlideShow() {
      document.getElementById(&quot;playpause&quot;).setAttribute(&quot;onclick&quot;, &quot;javascript: startSlideShow();&quot;);
      clearTimeout(timer);
  }
  function startSlideShow() {
      document.getElementById(&quot;playpause&quot;).setAttribute(&quot;onclick&quot;, &quot;javascript: stopSlideShow();&quot;);
      if(currentBrand == 0) {
          startRazer();
      }
      if(currentBrand == &quot;Razer&quot;) {
          startRazer();
      }
      if(currentBrand == &quot;Steelseries&quot;) {
          startSteelseries();
      }
      if(currentBrand == &quot;Logitech&quot;) {
          startLogitech();
      }
      if(currentBrand == &quot;Corsair&quot;) {
          startCorsair();
      }
  }
  </code></pre>