title: How can I change slide by mouse scroll?
body: <p>Is there any way I can get the example I have at <a href="https://jsfiddle.net/PortfolioCSG/wzcgp7y1/15/" rel="nofollow noreferrer">https://jsfiddle.net/PortfolioCSG/wzcgp7y1/15/</a> to change slides by scrolling the users mouse (as well as using the navigation dots/arrows)?</p>
  <p>I'd like for the user to be able to scroll through the slideshow/gallery without having to click the mouse if they don't want to, but I'm having trouble writing the code/finding something that works.</p>
  <p>I've tried a few different javascript codes and have failed at this point.</p>
  <p>TIA.</p>
  <pre><code>    &lt;div class=&quot;slideshow-container&quot;&gt;
    &lt;div class=&quot;mySlides1 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img1&quot;&gt;Image 1-1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides1 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img2&quot;&gt;Image 1-2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides1 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img3&quot;&gt;Image 1-3&lt;/div&gt;
    &lt;/div&gt;
    &lt;a class=&quot;prev&quot; onclick=&quot;plusSlides(-1, 0)&quot;&gt;&amp;#10094;&lt;/a&gt; &lt;a class=&quot;next&quot; onclick=&quot;plusSlides(1, 0)&quot;&gt;&amp;#10095;&lt;/a&gt;
    &lt;div style=&quot;text-align:center&quot;&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(1,0)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(2,0)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(3,0)&quot;&gt;&lt;/span&gt; &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;slideshow-container&quot;&gt;
    &lt;div class=&quot;mySlides2 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img1&quot;&gt;Image 2-1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides2 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img2&quot;&gt;Image 2-2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides2 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img3&quot;&gt;Image 2-3&lt;/div&gt;
    &lt;/div&gt;
    &lt;a class=&quot;prev&quot; onclick=&quot;plusSlides(-1, 1)&quot;&gt;&amp;#10094;&lt;/a&gt; &lt;a class=&quot;next&quot; onclick=&quot;plusSlides(1, 1)&quot;&gt;&amp;#10095;&lt;/a&gt;
    &lt;div style=&quot;text-align:center&quot;&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(1,1)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(2,1)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(3,1)&quot;&gt;&lt;/span&gt; &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;slideshow-container&quot;&gt;
    &lt;div class=&quot;mySlides3 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img1&quot;&gt;Image 3-1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides3 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img2&quot;&gt;Image 3-2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides3 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img3&quot;&gt;Image 3-3&lt;/div&gt;
    &lt;/div&gt;
    &lt;a class=&quot;prev&quot; onclick=&quot;plusSlides(-1, 2)&quot;&gt;&amp;#10094;&lt;/a&gt; &lt;a class=&quot;next&quot; onclick=&quot;plusSlides(1, 2)&quot;&gt;&amp;#10095;&lt;/a&gt;
    &lt;div style=&quot;text-align:center&quot;&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(1,2)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(2,2)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(3,2)&quot;&gt;&lt;/span&gt; &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;slideshow-container&quot;&gt;
    &lt;div class=&quot;mySlides4 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img1&quot;&gt;Image 4-1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides4 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img2&quot;&gt;Image 4-2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides4 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img3&quot;&gt;Image 4-3&lt;/div&gt;
    &lt;/div&gt;
    &lt;a class=&quot;prev&quot; onclick=&quot;plusSlides(-1, 3)&quot;&gt;&amp;#10094;&lt;/a&gt; &lt;a class=&quot;next&quot; onclick=&quot;plusSlides(1, 3)&quot;&gt;&amp;#10095;&lt;/a&gt;
    &lt;div style=&quot;text-align:center&quot;&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(1,3)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(2,3)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(3,3)&quot;&gt;&lt;/span&gt; &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;slideshow-container&quot;&gt;
    &lt;div class=&quot;mySlides5 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img1&quot;&gt;Image 5-1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides5 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img2&quot;&gt;Image 5-2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mySlides5 fade&quot;&gt; 
      &lt;!--Image here--&gt;
      &lt;div class=&quot;image img3&quot;&gt;Image 5-3&lt;/div&gt;
    &lt;/div&gt;
    &lt;a class=&quot;prev&quot; onclick=&quot;plusSlides(-1, 4)&quot;&gt;&amp;#10094;&lt;/a&gt; &lt;a class=&quot;next&quot; onclick=&quot;plusSlides(1, 4)&quot;&gt;&amp;#10095;&lt;/a&gt;
    &lt;div style=&quot;text-align:center&quot;&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(1,4)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(2,4)&quot;&gt;&lt;/span&gt; &lt;span class=&quot;dot&quot; onclick=&quot;currentSlide(3,4)&quot;&gt;&lt;/span&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5 {
      display: none
  }
  img {
      vertical-align: middle;
  }
  /* Slideshow container */
  .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin:0 auto 25px;
  }
  /* Next &amp; previous buttons */
  .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
  }
  /* Position the &quot;next button&quot; to the right */
  .next {
      right: 0;
      border-radius: 3px 0 0 3px;
  }
  /* On hover, add a grey background color */
  .prev:hover, .next:hover {
      background-color: #f1f1f1;
      color: black;
  }
  /* Fading animation */
  .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
  }
   @-webkit-keyframes fade {
   from {
  opacity: .4
  }
  to {
      opacity: 1
  }
  }
   @keyframes fade {
   from {
  opacity: .4
  }
  to {
      opacity: 1
  }
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
  .prev, .next, .text {
      font-size: 11px
  }
  }
  /* The dots/bullets/indicators */
  .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
  }
  .active, .dot:hover {
      background-color: #717171;
  }
  .image {
      height:100px;
      background:red;
  }
  .img1 {
      background:red
  }
  .img2 {
      background:yellow
  }
  .img3 {
      background:green
  }
  </code></pre>
  <pre><code>var slideIndex = [1,1,1,1,1];
  var slideId = [&quot;mySlides1&quot;, &quot;mySlides2&quot;, &quot;mySlides3&quot;, &quot;mySlides4&quot;, &quot;mySlides5&quot;]
  showSlides(1, 0);
  showSlides(1, 1);
  showSlides(1, 2);
  showSlides(1, 3);
  showSlides(1, 4);
  
  function plusSlides(n, no) {
    showSlides(slideIndex[no] += n, no);
  }
  function currentSlide(n, no) {
    showSlides(slideIndex[no] = n, no);
  }
  function showSlides(n, no) {
    var i;
    var x = document.getElementsByClassName(slideId[no]);
    if (n &gt; x.length) {slideIndex[no] = 1}    
    if (n &lt; 1) {slideIndex[no] = x.length}
    for (i = 0; i &lt; x.length; i++) {
       x[i].style.display = &quot;none&quot;;  
    }
    x[slideIndex[no]-1].style.display = &quot;block&quot;;  
  }
  </code></pre>