Can you add touch events in jquery Cycle?

1

I wanted to know if you have how to add ringing events in the jquery cycle. Because I want to put touch events in my slideshow.

Code:

<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.cycle.all.js"></script>
<script src="js/slide.js"></script>
</head>
<body>

<div class="slideshow">
  <div class="slides">

    <div class="slide-1">
     <a href="#"><img src="img/01.jpg"></a>
     <div class="info-slide-left">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>  
       <div class="seta-direita">
        <p>Categoria #1</p>
       </div>
        
         
     </div>
    </div>
        
    <div class="slide-2">
     <a href="#"><img src="img/img02.jpg"><a/>
     <div class="info-slide-rigth">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
       <div class="seta-direita-2">
        <p>Categoria #1</p>
       </div>
       
       
       </div>
    </div>
    
    <div class="slide-3">
    
     <a href="#"><img src="img/img02.jpg"></a>
     <div class="info-slide-right-3">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a> 
       <div class="seta-direita-3">
        <p>Categoria #1</p>
       </div>
        
     </div>
    </div>

  </div>
  
  <div class="slide"><!--Grupo 2 de slide-->

    <div class="slide-1">
     <a href="#"><img src="img/01.jpg"></a>
     <div class="info-slide-left">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>  
       <div class="seta-direita">
        <p>Categoria #1</p>
       </div>
        
         
     </div>
    </div>
        
    <div class="slide-2">
     <a href="#"><img src="img/img02.jpg"><a/>
     <div class="info-slide-rigth">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
       <div class="seta-direita-2">
        <p>Categoria #1</p>
       </div>
       
       
       </div>
    </div>
    
    <div class="slide-3">
    
     <a href="#"><img src="img/img02.jpg"></a>
     <div class="info-slide-right-3">
     
       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a> 
       <div class="seta-direita-3">
        <p>Categoria #1</p>
       </div>
        
     </div>
    </div>

  </div>
  
  

  </div><!--Fim do 2 Slide-->
</div><!--Fim da div slideshow-->

Jquery Cycle Code:

$(document).ready(function() { 
$('.slideshow').cycle({
      timeout:4000,
	  speed:600,
	  fx:'scrollHorz',
	  next: '#btn-prev',
	  prev: '#btn-next'
   });
});
    
asked by anonymous 23.09.2015 / 15:58

1 answer

1

So here in this tag: <div class="slideshow">

You do this:

<div class="slideshow" 
    data-cycle-swipe="true"
    data-cycle-swipe-fx="scrollHorz">

Adds these two other attributes.

    
23.09.2015 / 16:18