High-performance Content Slider with jQuery and GSAP

A simple, responsive jQuery slider which allows you to slide between a list of html content with high-performance HTML5 animations based on GSAP's TweenMax.js.

How to use it:

1. Add a list of html content with next / prev navigation buttons to the slider.

<div class="slider">
  <ul class="slide-wrapper">
    <li class="slider-item">
      <img src="1.jpg" alt="" class="slider-image">
    </li>
    <li class="slider-item">
      <img src="2.jpg" alt="" class="slider-image">
    </li>
    <li class="slider-item">
      <img src="3.jpg" alt="" class="slider-image">
    </li>
    ...
  </ul>
  <ul class="slider-nav">
    <li class="slider-button">
      <a href="#" class="slider-link slider-link-prev">Prev</a>
    </li>
    <li class="slider-button">
      <a href="#" class="slider-link slider-link-next">Next</a>
    </li>
  </ul>
</div>

2. The primary CSS styles for the content slider.

.slider {
  width: 400px;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.slide-wrapper {
  font-size: 0;
  padding: 0;
}

.slider-item {
  list-style: none;
  font-size: 0;
  display: inline-block;
  width: 400px;
  max-width: 100%;
}

.slider-image { max-width: 100%; }

3. Style the navigation buttons.

.slider-nav {
  margin: 0 auto;
  padding: 0;
  display: block;
  text-align: center;
}

.slider-button {
  display: inline-block;
  list-style: none;
  margin: 0.75rem 0.25rem;
  background: #3b3b3b;
}

.slider-button:hover { background: #454545; }

.slider-link {
  color: #fff;
  display: block;
  padding: 1rem 2rem;
  text-decoration: none;
}

4. Load the necessary jQuery library and TweenMax.js from CDNs.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> 

5. The JavaScript to enable the content slider.

( function($) {
  
  $(document).ready(function() {
    
    var s           = $('.slider'),
        sWrapper    = s.find('.slider__wrapper'),
        sItem       = s.find('.slider__item'),
        btn         = s.find('.slider__link'),
        sWidth      = sItem.width(),
        sCount      = sItem.length,
        sTotalWidth = sCount * sWidth;
    
    sWrapper.css('width', sTotalWidth);
    sWrapper.css('width', sTotalWidth);
    
    var clickCount  = 0;
    
    btn.on('click', function(e) {
      e.preventDefault();

      if( $(this).hasClass('slider__link--next') ) {
        
        ( clickCount < ( sCount - 1 ) ) ? clickCount++ : clickCount = 0;
      } else if ( $(this).hasClass('slider__link--prev') ) {
        
        ( clickCount > 0 ) ? clickCount-- : ( clickCount = sCount - 1 );
      }
      TweenMax.to(sWrapper, 0.2, {x: '-' + ( sWidth * clickCount ) })
    });
          
  });
})(jQuery);

---

This awesome jQuery plugin is developed by simonswiss. For more Advanced Usages, please check the demo page or visit the official website.