Slider elegante con TweenMax. js-tweenSlideshow

Vista prévia

Descripción

La biblioteca de JavaScript tweenslideshow le ayuda a crear un deslizador de contenido adaptable con efectos de transición eficaz usando < a href = "https://greensock.com/gsap" target = "_ blank" rel = "noopener" > GSAP tweenmax. js .

Funcionamiento

La estructura HTML necesaria para el control deslizante.

<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>

Cargue la versión más reciente de la biblioteca TweenMax. js y el código JavaScript de tweenSlideshow al final del documento.

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

Inicialice el control deslizante y listo.

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

Config el control deslizante anulando la configuración predeterminada como se muestra a continuación.

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



});