Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Anthony Ho
Anthony Ho
10,228 Points
Posted by Anthony Ho
Anthony Ho
10,228 Points

I want to enable touch support for a jQuery slider plugin.

I'm trying to add touch swipe left and right for mobile.

The carousel I'm using is Full Screen slit slider.

I downloaded a Jquery mobile to add the feature, but I can't get it to work.

Here's my jQuery code:

<script>
  $(document).ready(function() {  
         $("#slider").swiperight(function() {  
              slitslider.next();
                });  
           $("#slider").swipeleft(function() {  
              slitslider.previous(); 
       });  
    });  
</script>

HTML:

<div id="slider" class="sl-slider-wrapper">

                <div class="sl-slider">

                    <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                        <div class="sl-slide-inner">
                            <img src="img/1.jpg">

                        </div>
                    </div>

                    <div class="sl-slide bg-1" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                        <div class="sl-slide-inner">
                            <img src= "img/2.jpg">
                        </div>
                    </div>

                    <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                        <div class="sl-slide-inner">
                            <img src="img/3.jpg">

                        </div>
                    </div>

                    <div class="sl-slide bg-1" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
                        <div class="sl-slide-inner">
                            <img src= "img/4.jpg">
                        </div>
                    </div>

                <!--    <div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                        <div class="sl-slide-inner">
                            <div class="deco" data-icon="t"></div>
                            <h2>Jacket</h2>

                        </div>
                    </div> -->
                </div><!-- /sl-slider -->

                <nav id="nav-arrows" class="nav-arrows">
                    <span class="nav-arrow-prev"></span>
                    <span class="nav-arrow-next"></span>
                </nav>

                <!-- <nav id="nav-dots" class="nav-dots">
                    <span class="nav-dot-current"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </nav> -->

            </div>
</div>

1 Answer

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

The API documentation has a good demonstration of capturing and acting on a swipeleft event.

Building off of that example, you might try something like the following (assuming slitslider is an object you've defined):

$(document).ready(function() {  

  function swipeLeftHandler( evnt ){    // A function for handling leftward swipes
    slitslider.next();
  }
  function swipeRightHandler( evnt ){   // A function for handling rightward swipes
    slitslider.previous();
  }

  // Attaches event handlers to the swipeleft and swiperight events
  $( "#slider" )
    .on( "swipeleft", swipeLeftHandler )
    .on( "swiperight", swipeRightHandler );

});