Home/ Questions/Q 8763743
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T15:51:15+00:00

I’ve tried adding swipe-support to SudoSlider via Jquery Mobile , but so far it

  • 0

I’ve tried adding swipe-support to SudoSlider via Jquery Mobile, but so far it doesn’t seem to work. Both on the ipad and the iphone nothing happens when tried swiping.

Minimal working example of my page:

<!doctype html>
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.sudoSlider.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.mobile.custom.min.js"></script>
  </head>
    <body>
      <div id="container">
            <div id="pages">
                <ul class="pages">
                    <li class="page" id="front"></li>
                    <li class="page" id ="about"></li>
                    <li class="page" id ="who"></li>
                    <li class="page" id="services"></li>
                    <li class="page" id="projects"></li>
                    <li class="page" id="contact"></li>
              </ul>
            </div>
      </div>
<script type="text/javascript" >
$(document).ready(function(){
    var sudoSlider = $("#pages").sudoSlider({
        history:           true,
        prevNext:          false,
        continuous:        true,
        customLink:        'a.slide-controller',
        numericText:['home', 'mission', 'about', 'services', 'portfolio', 'contact']
        });

        $(document).keyup(function(e) {
        switch(e.keyCode) {
          case 37 : sudoSlider.goToSlide("prev"); break;
          case 39 : sudoSlider.goToSlide("next"); break;
        }

        $("#pages").swiperight(function() {
            sudoSlider.goToSlide("next");
        });

        $("#pages").swipeleft(function() {
            sudoSlider.goToSlide("prev");
        });
      });
    });
</script>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Although I am not an jquery mobile expert, I think you need to bind the swipe events to the pages, like $("#pages").bind("swipeleft", function() {...});

    Also you should take a look at the documentation to use $(document).bind('pageinit') instead of $(document).ready()

    Visit http://jquerymobile.com/demos/1.2.0/docs/api/events.html and take a look at the first yellow box; the swipe events are also explained there below.

    • 0