Can you add touch Events in jquery Cycle?

Asked

Viewed 62 times

1

I wanted to know if you have how to add touch events in 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-->

Code Jquery Cycle:

$(document).ready(function() { 
$('.slideshow').cycle({
      timeout:4000,
	  speed:600,
	  fx:'scrollHorz',
	  next: '#btn-prev',
	  prev: '#btn-next'
   });
});

jquery

  • Put the code in the Cycle.

  • So I’m gonna put it under the question !!

  • @Diegosouza already put the code.

  • You want to kind of move from one slider to the other with the dragging finger ?

  • @Diegosouza Yes that guy.

1 answer

1

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

You do so:

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

Add these other two attributes.

  • My slider is jquey Cycle 1 not 2.

  • Then you will have to use an alternative library. I suggest Hammer Js.

  • Is it easy to use the Hammer ? Because I am very bad at javascript.

  • In that case it will be a bit boring to do. You cannot upgrade to Cycle 2 ?

  • I tried Cycle 2, but it didn’t work on my slideshow.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.