Git Product home page Git Product logo

Comments (11)

arielsalminen avatar arielsalminen commented on July 19, 2024

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

from responsiveslides.js.

fetard avatar fetard commented on July 19, 2024

Thanks for the advice :)

from responsiveslides.js.

AlecRust avatar AlecRust commented on July 19, 2024

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.

from responsiveslides.js.

arielsalminen avatar arielsalminen commented on July 19, 2024

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. :-)

from responsiveslides.js.

AlecRust avatar AlecRust commented on July 19, 2024

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

from responsiveslides.js.

dasmax avatar dasmax commented on July 19, 2024

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.

from responsiveslides.js.

anupinders avatar anupinders commented on July 19, 2024

Hi dasmax,

where to put this code?

in responsivesildes.js file or on HTML file ?

from responsiveslides.js.

dasmax avatar dasmax commented on July 19, 2024

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>

from responsiveslides.js.

tonymonckton avatar tonymonckton commented on July 19, 2024

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

from responsiveslides.js.

dasmax avatar dasmax commented on July 19, 2024

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

from responsiveslides.js.

AndersBillLinden avatar AndersBillLinden commented on July 19, 2024

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!

from responsiveslides.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.