title: jQuery: Slider detect scrollDown or scrollUp
body: <p>I have a script which will make a simple slider with buttons to navigate.</p>
  <p>Now I need to make this slider controllable with scrolling.</p>
  <p>When user scroll down will be moved to the next slider also reverse.</p>
  <p>Buttons will be available too. So there will be 2 options on how to control it. With buttons next and back also with scrolling down or up.</p>
  <p>Is there any option of how to do it in the easiest way?</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 lottieone = document.getElementById('lottieone');
  var lottietwo = document.getElementById('lottietwo');
  var lottiethree = document.getElementById('lottiethree');
  var lottiefour = document.getElementById('lottiefour');
  
  $('#lottieone').show();
  $('#lottietwo').hide();
  $('#lottiethree').hide();
  $('#lottiefour').hide();
  
  
  function missionsSlide() {
    $('#lottieone').hide();
    $('#lottietwo').show();
    $('#lottiethree').hide();
    $('#lottiefour').hide();
  }
  
  function missionsSlideBacc() {
    $('#lottieone').hide();
    $('#lottietwo').show();
    $('#lottiethree').hide();
    $('#lottiefour').hide();
  }
  
  function researchSlide() {
    $('#lottieone').hide();
    $('#lottietwo').hide();
    $('#lottiethree').show();
    $('#lottiefour').hide();
  }
  
  function educationSlide() {
    $('#lottieone').hide();
    $('#lottietwo').hide();
    $('#lottiethree').hide();
    $('#lottiefour').show();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section class="slider"&gt;
    &lt;div id="lottieone" class="lottieSlide"&gt;
      &lt;div class="content"&gt;
        &lt;button onclick="missionsSlide()"&gt;HOME&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="lottietwo" class="lottieSlide mainSliders"&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;MISSIONS&lt;/h1&gt;
        &lt;button onclick="researchSlide()"&gt;Next&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="lottiethree" class="lottieSlide mainSliders"&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;RESEARCH&lt;/h1&gt;
        &lt;button onclick="missionsSlideBacc()"&gt;Back&lt;/button&gt;
        &lt;button onclick="educationSlide()"&gt;Next&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="lottiefour" class="lottieSlide mainSliders"&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;EDUCATION&lt;/h1&gt;
        &lt;button onclick="researchSlide()"&gt;Back&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>