Touch controls ?

[samy]

Hi Do you plan to use touch control support to ResponsiveSlide.js ? (like "taping on slider displays the next slide" or "swiping makes the slider to advance")

[arielsalminen]

Probably not. If you need it I suggest you to try Flex Slider which provides more options: http://www.woothemes.com/flexslider/

[fetard]

Thanks for the advice :)

[AlecRust]

Wondering why you're choosing not to include this? It is a responsive carousel after all, seems one of the only missing important features if you ask me.

[arielsalminen]

Just because of time constraint… After all, I'm developing this plugin on my free time. "Taping on slider displays the next slide" is already possible to do though (http://viljamis.com/responsive-slides/themes/).

This all might change though if I need the plugin in a client project and the client is willing to pay for the development. :-)

[AlecRust]

Fair enough. Thanks for the "tapping slider advances" info!

[dasmax]

Hi, you can make the slider touch-enabled by adding some js:

Add: https://github.com/stephband/jquery.event.move/blob/master/js/jquery.event.move.js https://github.com/stephband/jquery.event.swipe/blob/master/js/jquery.event.swipe.js

Those two scripts are really just a few kb Now, add the following script for making the responsiveslide.js touch-enabled:

// Next Slide on Swipe
if ($(window).width() < 992) { // Only if device's width is smaller than 992px
    var slides = jQuery('.rslides'),
        i = 0;
    slides
    .on('swipeleft', function(e) {
      $('.rslides_nav.next').click();
      $(".rslides").mouseenter();
      setTimeout(function() {   $(".rslides").mouseleave(); }, 2000); // Delay automatic sliding for 2seconds after swiping
    })
    .on('swiperight', function(e) {
      $('.rslides_nav.prev').click();
      $(".rslides").mouseenter();
      setTimeout(function() {   $(".rslides").mouseleave(); }, 2000); // Delay automatic sliding for 2seconds after swiping
    });

    // If the movestart is heading off in an upwards or downwards direction, prevent it so that the browser scrolls normally.
    jQuery('.rslides')
    .on('movestart', function(e) {
      if ((e.distX > e.distY && e.distX < -e.distY) ||
          (e.distX < e.distY && e.distX > -e.distY)) {
        e.preventDefault();
      }
    });
}

This is of course the code that works for me. You probably have to change some details for your own project.

[anupinders]

Hi dasmax,

where to put this code?

in responsivesildes.js file or on HTML file ?

[dasmax]

Probably something like this:

                <script type="text/javascript" src="js/responsiveslides.js"></script>
        <script type="text/javascript" src="js/jquery.event.move.js"></script>
        <script type="text/javascript" src="js/jquery.event.swipe.js"></script>
        <script type="text/javascript">
            // Next Slide on Swipe
            if ($(window).width() < 992) { // Only if device's width is smaller than 992px
                var slides = jQuery('.rslides'),
                    i = 0;
                slides
                .on('swipeleft', function(e) {
                  $('.rslides_nav.next').click();
                  $(".rslides").mouseenter();
                  setTimeout(function() {   $(".rslides").mouseleave(); }, 2000); // Delay automatic sliding for 2seconds after swiping
                })
                .on('swiperight', function(e) {
                  $('.rslides_nav.prev').click();
                  $(".rslides").mouseenter();
                  setTimeout(function() {   $(".rslides").mouseleave(); }, 2000); // Delay automatic sliding for 2seconds after swiping
                });

                // If the movestart is heading off in an upwards or downwards direction, prevent it so that the browser scrolls normally.
                jQuery('.rslides')
                .on('movestart', function(e) {
                  if ((e.distX > e.distY && e.distX < -e.distY) ||
                      (e.distX < e.distY && e.distX > -e.distY)) {
                    e.preventDefault();
                  }
                });
            }
        </script>

[tonymonckton]

Hi Dasmax,

    I've tried your code, but it doesn't seem to work.  
    any chance you could update the demo.html and send a zip file.
    desperately need this

tony

[dasmax]

Hi, the above code worked fine for me. It's been a while so I can't help you any further on this. Sorry!

[AndersBillLinden]

Works for me, I removed the delay. Do not forget to add script tags for those jquery.event.move.js and jquery.event.swipe.js files!