Arrastrable & carrusel de control táctil amigable en Pure JS

Vista prévia

Descripción

Un componente de carrusel con capacidad de respuesta, apto para dispositivos móviles, escrito en JavaScript y CSS/CSS3.

El deslizador es compatible con cualquier contenido web que permite deslizar entre diapositivas usando arrastrar el ratón o tocar eventos de deslizamiento.

Funcionamiento

Cree el código HTML para el control deslizante.

<div id="slider" class="slider">

<div class="wrapper">


<div id="items" class="items">



<span class="slide">Slide 1</span>



<span class="slide">Slide 2</span>



<span class="slide">Slide 3</span>



<span class="slide">Slide 4</span>



<span class="slide">Slide 5</span>



...


</div>

</div>

<a id="prev" class="control prev"></a>

<a id="next" class="control next"></a>
</div>

Los estilos CSS necesarios para el control deslizante.

.slider {

width: 300px;

height: 200px;
}

.wrapper {

overflow: hidden;

position: relative;

background: #222;

z-index: 1;
}

#items {

width: 10000px;

position: relative;

top: 0;

left: -300px;
}

#items.shifting {

transition: left .2s ease-out;
}

.slide {

width: 300px;

height: 200px;

cursor: pointer;

float: left;

display: flex;

flex-direction: column;

justify-content: center;

transition: all 1s;

position: relative;

background: #FFCF47;
}

Estilo de los controles de navegación.

.control {

position: absolute;

top: 50%;

width: 40px;

height: 40px;

background: #fff;

border-radius: 20px;

margin-top: -20px;

box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);

z-index: 2;
}

.prev,
.next {

background-size: 22px;

background-position: center;

background-repeat: no-repeat;

cursor: pointer;
}

.prev {

background-image: url(ChevronLeft.png);

left: -20px;
}

.next {

background-image: url(ChevronRight-512.png);

right: -20px;
}

.prev:active,
.next:active {

transform: scale(0.8);
}

El JavaScript necesario para activar el deslizador.

var slider = document.getElementById('slider'),


sliderItems = document.getElementById('items'),


prev = document.getElementById('prev'),


next = document.getElementById('next');

slide(slider, sliderItems, prev, next);

function slide(wrapper, items, prev, next) {

var posX1 = 0,



posX2 = 0,



posInitial,



posFinal,



threshold = 100,



slides = items.getElementsByClassName('slide'),



slidesLength = slides.length,



slideSize = items.getElementsByClassName('slide')[0].offsetWidth,



firstSlide = slides[0],



lastSlide = slides[slidesLength - 1],



cloneFirst = firstSlide.cloneNode(true),



cloneLast = lastSlide.cloneNode(true),



index = 0,



allowShift = true;



// Clone first and last slide

items.appendChild(cloneFirst);

items.insertBefore(cloneLast, firstSlide);

wrapper.classList.add('loaded');



// Mouse and Touch events

items.onmousedown = dragStart;



// Touch events

items.addEventListener('touchstart', dragStart);

items.addEventListener('touchend', dragEnd);

items.addEventListener('touchmove', dragAction);



// Click events

prev.addEventListener('click', function () { shiftSlide(-1) });

next.addEventListener('click', function () { shiftSlide(1) });



// Transition events

items.addEventListener('transitionend', checkIndex);



function dragStart (e) {


e = e || window.event;


e.preventDefault();


posInitial = items.offsetLeft;





if (e.type == 'touchstart') {



posX1 = e.touches[0].clientX;


} else {



posX1 = e.clientX;



document.onmouseup = dragEnd;



document.onmousemove = dragAction;


}

}


function dragAction (e) {


e = e || window.event;





if (e.type == 'touchmove') {



posX2 = posX1 - e.touches[0].clientX;



posX1 = e.touches[0].clientX;


} else {



posX2 = posX1 - e.clientX;



posX1 = e.clientX;


}


items.style.left = (items.offsetLeft - posX2) + "px";

}



function dragEnd (e) {


posFinal = items.offsetLeft;


if (posFinal - posInitial < -threshold) {



shiftSlide(1, 'drag');


} else if (posFinal - posInitial > threshold) {



shiftSlide(-1, 'drag');


} else {



items.style.left = (posInitial) + "px";


}



document.onmouseup = null;


document.onmousemove = null;

}



function shiftSlide(dir, action) {


items.classList.add('shifting');





if (allowShift) {



if (!action) { posInitial = items.offsetLeft; }




if (dir == 1) {




items.style.left = (posInitial - slideSize) + "px";




index++;






} else if (dir == -1) {




items.style.left = (posInitial + slideSize) + "px";




index--;






}


};





allowShift = false;

}




function checkIndex (){


items.classList.remove('shifting');



if (index == -1) {



items.style.left = -(slidesLength * slideSize) + "px";



index = slidesLength - 1;


}



if (index == slidesLength) {



items.style.left = -(1 * slideSize) + "px";



index = 0;


}





allowShift = true;

}
}