0

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

2
  • Te refieres a que no funciona el click sobre los botones de navegacion atras/adelante en movil? o que deseas que permita swipe horizontal?
    – F.Igor
    Commented el 19 nov. 2020 a las 7:39
  • 1
    Me refiero a que este slider tenga la misma funcionalidad que tienen las flechas al dar click en ellas pero con los dedos, es decir, se pueda deslizar de derecha a izquierda y vicersa, horizontalmente, con los dedos en pantallas moviles.
    – Husdady
    Commented el 19 nov. 2020 a las 9:22

3 respuestas 3

0

Si necesitas crear un slider con capacidades táctiles, responsive y muy versátil, te recomiendo que uses Owl Carousel2

Sus bondades:

  1. muy customizable
  2. Soporte para pantallas táctiles, drag, muy buena respuesta
  3. Responsive y con configuración específica para este fin
  4. Soporte amplio de navegadores
  5. plugins que aumenta sus capacidades

Añado un ejemplo de su uso:

JS:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});

HTML:

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
</div>
1
  • No pregunta por un nuevo slider, necesita actualizar el suyo.
    – Srsole
    Commented el 19 nov. 2020 a las 12:51
0

Tienes que cambiar todos tus eventos de mouse (click) por eventos tactiles (touchstart, touchend, touchmove).

Referencias para que mayor informacion: https://www.w3schools.com/jsref/event_touchstart.asp

5
  • hice cambios a los eventos click, pero no logro obtener los cambios que quiero, publicaré una respuesta con los cambios que hice, exactamente cuando intento retroceder el slider con los dedos no funciona, pero si cuando avanza
    – Husdady
    Commented el 19 nov. 2020 a las 22:01
  • Me retracto, mejor agrego el pequeño codigo que cambie aqui: var backup = $('.slider'); backup[0].addEventListener('touchstart', moveToRight); right_arrow[0].addEventListener('click', moveToRight); left_arrow[0].addEventListener('click', moveToLeft); /* SI AGREGO backup[0].addEventListener('touchstart', moveToLeft); no funciona el evento tactil, ¿ COMO PUEDO SOLUCIONAR ESTO ? */
    – Husdady
    Commented el 19 nov. 2020 a las 22:10
  • Me olvidaba de las funciones function moveToRight(){ i++; changeResize(); } function moveToLeft(){ i--; changeResize(); }
    – Husdady
    Commented el 19 nov. 2020 a las 22:13
  • @Husdady puedes editar tu pregunta ponerla con los cambios que me comentas porfa?
    – Srsole
    Commented el 20 nov. 2020 a las 7:39
  • hice los cambios desde un movil, no lo he ordenado bien porque me marca un error se sangria por eso he puesto todo junto, mas tarde desde pc lo acomodare mejor, deje un comentario en el codigo para que me puedas entender mejor.
    – Husdady
    Commented el 20 nov. 2020 a las 10:09
0

Para gestionarla pantalla táctil debes controlar los eventos de touch.
touchstart se ejecuta en iniciar el contacto, y touchmove se ejecuta cada vez que te mueves.
Para saber en que dirección te mueves puedes almacenar la posición donde empieza, en el evento touchstart, y luego compararlo con la posición actual en ontouchmove.
Aquí dejo un ejemplo mínimo, pero ten en cuenta que en esta web no funcionan los eventos de touch en los ejemplos.

    IDleftclick.onclick=leftclick;
    IDrightclick.onclick=rightclick;

    // touch
    var touch_x_ini;
    var click_cancel = false;
    
    document.ontouchstart=function(event){
        touch_x_ini = event.touches[0].clientX;
     };
     
    document.ontouchmove = function(event){
        var touch_x = event.touches[0].clientX;
        if (touch_x < touch_x_ini-20){
            leftclick();
            touch_x_ini = event.touches[0].clientX;
        }
        if (touch_x > touch_x_ini+20){
            rightclick();
            touch_x_ini = event.touches[0].clientX;
        }   
    };

    function leftclick(event){
        if (click_cancel) return;
        click_cancel=true;
        IDleftclick.style.backgroundColor="gray";
        setTimeout(function(){
            IDleftclick.style.backgroundColor="initial";
            click_cancel = false;
        }, 1000); 
    }
    function rightclick(event){
        if (click_cancel) return;
        click_cancel=true;
        IDrightclick.style.backgroundColor="gray";
        setTimeout(function(){
            IDrightclick.style.backgroundColor="initial";
            click_cancel = false;
        }, 1000); 
    }
    #IDleftclick
    {
      width:25px;
      height:25px;
      border: 1px solid black;
      margin:10px;
      float:left;
    }
    #IDrightclick
    {
      width:25px;
      height:25px;
      border: 1px solid black;
      margin:10px;
      float:left;
    }
    <div id="IDleftclick"></div>
    <div id="IDrightclick"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.