tengo este slider y necesito que sea táctil.
$(function(){
(function($) {
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function() {
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(e) {
$(this).replaceWith($(shuffled[e]));
});
return $(shuffled);
};
})($);
$('.slider section').hide();
$('.slider section').shuffle();
$('.slider section').slice(20).remove()
$('.slider section').css('display','flex');
var i = 0;
var slider_automatic = true;
var right_arrow = $('#right-circle');
var left_arrow = $('#left-circle');
var backup = document.querySelector('.slider');
backup.addEventListener('touchstart', moveToRight);
right_arrow[0].addEventListener('click', moveToRight);
left_arrow[0].addEventListener('click', moveToLeft);
function moveToRight(){ i++; changeResize(); }
function moveToLeft(){ i--; changeResize(); }
/* Si cambio los eventos click en las flechas por touchstart, solo funciona en moviles, en pc no reconoce ese evento, por eso lo dejo en click.
Ademas agrego un evento touchstart al div padre para que el slider pueda ser arrastrable con los dedos desde un movil,
pero lo que probado en movil y es como si dieras clic en la flecha derecha, no logra tener un deslizamiento suave y no es por el transition del css,
es decir, mantienes tu dedo sobre el slider y lo deslizas lento de derecha e izquierda y vicersa donde te tiene que aparecer de poco a poco cada section,
practicamente ese problema necesito resolver */
var slider = $('.slider');
var sections = $('.slider section');
var number_sections = sections.length;
const tablet = window.matchMedia('(max-width: 1024px)');
const small_tablet = window.matchMedia('(max-width: 768px)');
const mobile = window.matchMedia('(max-width: 600px)');
const small_mobile = window.matchMedia('(max-width: 280px)');
function changeResize() {
var sections_to_show = 5;
if(small_mobile.matches){
sections_to_show = 1;
}
else if (mobile.matches) {
sections_to_show = 2;
}
else if (small_tablet.matches) {
sections_to_show = 3;
}
else if (tablet.matches) {
sections_to_show = 4;
}
slider.css('width', 100 * number_sections / sections_to_show + '%');
sections.css('width', 100 / number_sections * sections_to_show + '%');
i = Math.floor(Math.min(Math.max(i, 0), number_sections - sections_to_show));
if (i > 0) {
slider.css({
'left': '-' + 100 / sections_to_show * i + '%'
});
}
if(i == 0){
slider.css('left', 0);
slider_automatic = true;
}
if(i == number_sections - sections_to_show){
slider_automatic = false;
}
}
changeResize();
window.addEventListener('resize', changeResize);
setInterval(function(){
if(slider_automatic == true){
right_arrow.trigger('click');
}
else if(slider_automatic == false) {
left_arrow.trigger('click');
}
},3000);
$(document).on('keydown', function(e){
if(e.keyCode == 39){
right_arrow.trigger('click');
}
if(e.keyCode == 37){
left_arrow.trigger('click');
}
});
});
body{
padding: 0;
margin: 0;
}
.container{
position: relative;
overflow: hidden;
}
.slider{
display: flex;
position: relative;
transition: .4s linear;
left: 0;
}
.slider section{
height: 300px;
}
#left-circle,
#right-circle{
position: absolute;
top: 40%;
z-index: 30;
cursor: pointer;
color: rgba(255,255,255,0.5);
font-size: 48px;
}
#left-circle{
left: 0;
}
#right-circle{
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<div class="container">
<i class="fas fa-chevron-circle-left" id="left-circle"></i>
<i class="fas fa-chevron-circle-right" id="right-circle"></i>
<div class="slider">
<section style="background: darkred;"></section>
<section style="background: darkblue;"></section>
<section style="background: darkorange;"></section>
<section style="background: black;"></section>
<section style="background: gold;"></section>
<section style="background: lightblue;"></section>
<section style="background: yellow;"></section>
<section style="background: brown;"></section>
<section style="background: skyblue;"></section>
<section style="background: green;"></section>
<section style="background: gray;"></section>
<section style="background: purple;"></section>
<section style="background: chocolate;"></section>
<section style="background: pink;"></section>
<section style="background: orange;"></section>
<section style="background: maroon;"></section>
<section style="background: violet;"></section>
<section style="background: navy"></section>
<section style="background: fuchsia"></section>
<section style="background: darkgray"></section>
</div>
</div>
Agregué estos dos scripts http://code.jquery.com/ui/1.8.17/jquery-ui.min.js y jquery.ui.touch-punch.min.js
para poder hacer tactil al slider, ademas de agregar esto slider.draggable()
, me marca el siguiente error:
> jquery-ui.min.js:9 Uncaught TypeError: Cannot read property 'msie' of undefined
at a.<computed>.<computed>._mouseMove (jquery-ui.min.js:9)
at HTMLDocument._mouseMoveDelegate (jquery-ui.min.js:9)
at HTMLDocument.dispatch (jquery.js:4)
at HTMLDocument.r.handle (jquery.js:4)
at f (jquery.ui.touch-punch.min.js:11)
at a.<computed>.<computed>.b._touchMove (jquery.ui.touch-punch.min.js:11)
at HTMLDivElement.e (jquery.js:2)
at HTMLDivElement.dispatch (jquery.js:4)
at HTMLDivElement.r.handle (jquery.js:4)
Estoy usando la libreria Touch punch, ¿Alguien sabe usar esta librería?, no puedo ingregar a su página oficial http://touchpunch.furf.com/ , no esta disponible, y en su pagina de github no muestran un ejemplo claro, exactamente dicen que agregue esto $('#widget').draggable()
, pero ese selector no existe en mi archivo.html . Entonces ¿Cómo se usa TouchPunch? o ¿Existe alguna variante a TouchPunch?, Agradecería mucho que me puedan ayudar a convertir este slider a táctil, pienso implementar sliders táctiles en futuros proyectos. Gracias