Adapt hover animation for iPad with touch events

Question

This is my first attempt at developing something with touch events. I have a slider that animates on hover, and the first two slides have links that reveal hidden content on click. Trying to figure out a way to adapt it so that the content animates on swipe instead of on hover, and still maintain the "on click" for the links within the slides. The site I use has jQuery 1.3.2 with no hope of upgrading so hoping to find something that will work with that old library.

You can see the slider in progress here. I also put it into a fiddle:http://jsfiddle.net/uqY8E/

Ultimately, what I am trying to achieve is to move the slides (it's OK if the background is static on the iPad) when the user swipes their finger, and if they lift their finger, the animation stops, just like it starts and stops with hover. I read this and created an if/else statement so it will still work on hover. The animation won't work on the iPad, but the arrows do not display so I think the if statement is correct.

jQuery:

            $(document).ready(function() {
        var timer;

        if(!!('ontouchstart' in window)){
            $("#nextarrow, #backarrow").hide();
            $(".mid").bind('touchstart', function(){
                timer = setInterval(function() {swipeLeft();}, 50);
            }, function() {
                clearInterval(timer);
            });

            function swipeLeft() {
                                if(($(".mid").position().left) >= -1880){
                                $("#background").stop().animate({
                                    'left': '-=2px'
                                }, 50);
                                $(".mid").stop().animate({
                                    'left': '-=20px'
                                }, 50);
                                }
                            }
        }

        else{
        $("#nextarrow").hover(function() {
                timer = setInterval(function() {slideLeft();}, 50);
            }, function() {
                clearInterval(timer);
            });


        $("#backarrow").hover(function() {
                timer = setInterval(function() {slideRight();}, 50);
            }, function() {
                clearInterval(timer);
            });



        function slideLeft() {
            if(($(".mid").position().left) >= -1880){
            $("#background").stop().animate({
                'left': '-=2px'
            }, 50);
            $(".mid").stop().animate({
                'left': '-=20px'
            }, 50);
            }
        }

        function slideRight() {
            if(($(".mid").position().left) <= -10){
            $("#background").stop().animate({
                'left': '+=2px'
            }, 50);
            $(".mid").stop().animate({
                'left': '+=20px'
            }, 50);
            }
        }

        }


        $("#shop-slide1").click(function() {
        $("#shop-slide1-contents").animate({'bottom': '-0px'}, 1000);
        $(".close").click(function() {
        $("#shop-slide1-contents").animate({'bottom': '-525px'}, 1000);
        });
        });

        $("#shop-slide2").click(function() {
        $("#shop-slide2-contents").fadeIn('slow');
        $(".close").click(function() {
        $("#shop-slide2-contents").fadeOut('fast');
        });
        });

        });

HTML:

            <div id="mask">
            <div id="nextarrow"></div>
            <div id="backarrow"></div>
            <div id="background"></div>
            <div class="mid">                   
                                 <div id="slide1" class="slide">
                                    <p id="shop-slide1" class="shop-link">+ Shop The Collection</p>
                                 </div>
                                 <div id="slide2" class="slide">
                                    <p id="shop-slide2" class="shop-link" style="color: #fff; font-weight: bold;">+ I need this</p>
                                 </div>
                                 <div id="slide3" class="slide"></div>
                                 <div id="slide4" class="slide"></div>
                                 <div id="slide5" class="slide"></div>


            </div>
            </div>

Do I need to change the swipeLeft function specifically for the iPad? I copied it from the hover event. Any help in getting this to work - or suggestions for an alternate way to adapt this for the iPad - are much appreciated. I am new at this, so lots to learn!