title: Can make the mouse wheel scroll this slideshow?
body: <p>I was making a slideshow, but I cant scroll through images with the mouse wheel. I tried to make it scrollable with the mouse wheel, but I always end up messing all the animation and the slides, can anyone help me with this?</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>(function($) {
    // Variables
    var sectionFrom,
      $slide = $('.slide'),
      $slideActive = $('.slide.active'),
      $navLink = $('.nav a'),
      $navLi = $('.nav li'),
      $body = $('body');
  
    // Init function
    function init() {
      // Set active slide visible
      TweenLite.set($slideActive, {
        x: '0%'
      });
  
      // Fade slides in
      TweenLite.set($body, {
        className: '-=loading'
      });
    }
    init();
  
    // Navigation click
    $navLink.on('click', function(e) {
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        e.returnValue = false;
      }
  
      // prevent animation when animating
      if (!$body.hasClass('is-animating')) {
        var sectionFrom = $('.slide.active'),
          sectionToID = $(e.target).attr('href'),
          sectionTo = $('div' + sectionToID);
  
        if (sectionFrom.attr('id') !== sectionTo.attr('id')) {
          scrollToSection(sectionFrom, sectionTo);
        }
      }
    });
  
    function scrollToSection(sectionFrom, sectionTo) {
  
      var heading = sectionTo.find('h1'),
        subheading = sectionTo.find('p'),
        bcg = sectionTo.find('.bcg'),
        bcgFrom = sectionFrom.find('.bcg'),
        tlDown = new TimelineLite({
          onComplete: setActiveSection(sectionFrom, sectionTo)
        }),
        tlUp = new TimelineLite();
  
      if (sectionFrom.index() &lt; sectionTo.index()) {
        //console.log('going down');
        tlDown
          .set($body, {
            className: '+=is-animating'
          })
          .to(sectionFrom, 1.2, {
            x: '-=100%',
            ease: Power4.easeInOut,
            clearProps: 'all'
          }, '0')
          .to(sectionTo, 1.2, {
            x: '0%',
            ease: Power4.easeInOut
          }, '0')
          .to(bcgFrom, 1.2, {
            x: '30%',
            ease: Power4.easeInOut,
            clearProps: 'all'
          }, '0')
          .from(bcg, 1.2, {
            x: '-30%',
            ease: Power4.easeInOut,
            clearProps: 'all'
          }, '0')
          .from(heading, 0.7, {
            autoAlpha: 0,
            x: 40,
            ease: Power4.easeInOut
          }, '-=1')
          .from(subheading, 0.7, {
            autoAlpha: 0,
            x: 40,
            ease: Power4.easeInOut
          }, '-=0.6')
          .set($body, {
            className: '-=is-animating'
          });
  
      } else {
        //console.log('going up');
        tlUp
          .set($body, {
            className: '+=is-animating'
          })
          .set(sectionTo, {
            x: '-100%'
          })
          .to(sectionFrom, 1.2, {
            x: '100%',
            ease: Power4.easeInOut,
            clearProps: 'all'
          }, '0')
          .to(sectionTo, 1.2, {
            x: '0%',
            ease: Power4.easeInOut
          }, '0')
          .to(bcgFrom, 1.2, {
            x: '-30%',
            ease: Power4.easeInOut,
            clearProps: 'all'
          }, '0')
          .from(bcg, 1.2, {
            x: '30%',
            ease: Power4.easeInOut,
            clearProps: 'all'
          }, '0')
          .from(heading, 0.7, {
            autoAlpha: 0,
            x: 40,
            ease: Power4.easeInOut
          }, '-=1')
          .from(subheading, 0.7, {
            autoAlpha: 0,
            x: 40,
            ease: Power4.easeInOut
          }, '-=0.6')
          .set($body, {
            className: '-=is-animating'
          });
      }
    }
  
    function setActiveSection(sectionFrom, sectionTo) {
      // Add active class to the current slide
      sectionFrom.removeClass('active');
      sectionTo.addClass('active');
  
      // Add a body class highlighting the current slide
      $body.removeAttr('class').addClass($(sectionTo).attr('id') + '-active');
  
      // Highlight current slide in the navigation
      var currentSlideIndex = parseInt($(sectionTo).attr('id').slice(-2)) - 1;
      $navLi.removeAttr('class');
      $navLi.eq(currentSlideIndex).addClass('active');
    }
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif;
    background-color: #2e2e30;
    color: #fff;
  }
  
  h1,
  h2,
  h3,
  h4 {
    font-weight: 700;
  }
  
  .slidesContainer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }
  
  .slideContent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  
  .slideContent h1 {
    font-size: 24px;
    margin-bottom: 5px;
    line-height: 1em;
  }
  
  .slideContent p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }
  
  /* =Project Slides */
  .slide {
    height: 100%;
    text-align: center;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: translateX(100%);
    transition: opacity 0.3s linear, visibility 0.3s linear;
    opacity: 1;
    visibility: visible;
  }
  
  .loading {
    opacity: 0;
    visibility: hidden;
  }
  
  .bcg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    z-index: 1;
  }
  
  .slide01 .bcg {
    background-image: url('https://s-media-cache-ak0.pinimg.com/736x/80/91/f9/8091f9dceb2ea55fa7b57bb7295e1824--hd-iphone--wallpapers-backgrounds-wallpapers.jpg');
  }
  
  .slide02 .bcg {
    background-image: url(https://www.planwallpaper.com/static/images/880665-road-wallpapers.jpg);
  }
  
  .slide03 .bcg {
    background-image: url(https://s-media-cache-ak0.pinimg.com/736x/80/91/f9/8091f9dceb2ea55fa7b57bb7295e1824--hd-iphone--wallpapers-backgrounds-wallpapers.jpg');
  }
  
  .slide04 .bcg {
    background-image: url(https://www.planwallpaper.com/static/images/880665-road-wallpapers.jpg);
  }
  
  .slide04 .slideContent h1 {
    color: #222;
  }
  
  .slide04 .slideContent p {
    color: rgba(0, 0, 0, 0.7);
  }
  
  /* =Navigation */
  .nav {
    position: fixed;
    bottom: 40px;
    right: 40px;
    left: 40px;
    list-style: none;
    z-index: 3;
    margin: 0;
    padding: 0;
  }
  
  .nav li {
    float: left;
    list-style: none;
    width: 25%;
    text-align: center;
  }
  
  .nav a {
    color: #222;
    display: block;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 12px;
    border: 1px rgba(255, 255, 255, 0.7) solid;
    border-width: 1px 0 1px 1px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s linear;
  }
  
  .nav li:last-child a {
    border-width: 1px
  }
  
  .nav li.active a {
    background-color: rgba(255, 255, 255, 0.8);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="slidesContainer"&gt;
  
    &lt;div id="slide01" class="slide slide01 active"&gt;
      &lt;div class="bcg"&gt;&lt;/div&gt;
      &lt;div class="slideContent"&gt;
        &lt;h1&gt;Slide 1 Title&lt;/h1&gt;
        &lt;p&gt;This is a short description.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="slide02" class="slide slide02"&gt;
      &lt;div class="bcg"&gt;&lt;/div&gt;
      &lt;div class="slideContent"&gt;
        &lt;h1&gt;Slide 2 Title&lt;/h1&gt;
        &lt;p&gt;This is a short description.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="slide03" class="slide slide03"&gt;
      &lt;div class="bcg"&gt;&lt;/div&gt;
      &lt;div class="slideContent"&gt;
        &lt;h1&gt;Slide 3 Title&lt;/h1&gt;
        &lt;p&gt;This is a short description.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="slide04" class="slide slide04"&gt;
      &lt;div class="bcg"&gt;&lt;/div&gt;
      &lt;div class="slideContent"&gt;
        &lt;h1&gt;Slide 4 Title&lt;/h1&gt;
        &lt;p&gt;This is a short description.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;ul class="nav"&gt;
      &lt;li class="active"&gt;&lt;a href="#slide01"&gt;Slide 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#slide02"&gt;Slide 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#slide03"&gt;Slide 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#slide04"&gt;Slide 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>