Fancy Slider With TweenMax.js – tweenSlideshow

The tweenSlideshow JavaScript library helps you to create a responsive content slider with performant transition effects using GSAP’s TweenMax.js.

How to use it:

The required HTML structure for the slider.

<div class="slider" id="slider">
  <div class="slider__container">
    <div class="slider__item">
      <div class="slider__content">Content 1</div>
    </div>
    <div class="slider__item">
      <div class="slider__content">Content 2</div>
    </div>
    <div class="slider__item">
      <div class="slider__content">Content 3</div>
    </div>
    <div class="slider__item">
      <div class="slider__content">Content 4</div>
    </div>
    ...
  </div>
</div>

Load the latest version of the TweenMax.js library and the tweenSlideshow’s JavaScript at the end of the document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="/path/to/tuinslider.min.js"></script>

Initialize the slider and done.

var mySlider = new TuinSlider("#slider");

Config the slider by overriding the default settings as displayed below.

var mySlider = new TuinSlider("#slider",{
    // slider selector
    selector: '.slider',
    // Greensock options
    ease: 'SlowMo',
    easeType: 'easeOut',
    duration: 1,
    // pagination & navigation controls
    nextHtml: '',
    prevHtml: '',
    paginationHtml: '',
    arrows: true,
    keyboard: true,
    pagination: true,
    // callback functions
    onLeave: null,
    afterLoad: null
    
});