Touch enabled image slider using jquery

Hello everyone,

I am building a responsive website, in which there is an image slider on the home page.. the slider works perfectly without any loop holes.. but i want to make that image slider touch enabled (swipe enabled)..

I dont want to change that slider as i have arranged images according to it..

I have tried many touch enabled js files (hammer and swipe js) but those are not working for me..

I have used superslides fullscreen jquery image slider.

my code for image slider..
<pre>
<div id="slides" style="z-index:0;" >
    <div class="slides-container">
       <img src="images/1.jpg" style="width:100%; height:100%">

      <img src="images/2.jpg" style="width:100%; height:100%">
      <img src="images/3.jpg"style="width:100%; height:100%">
      <img src="images/4.jpg" style="width:100%; height:100%">
         <img src="images/5.jpg" style="width:100%; height:100%">
         <img src="images/6.jpg" style="width:100%; height:100%">
         <img src="images/7.jpg" style="width:100%; height:100%">
    </div>
</div>
</pre>
 <script>

        // pure JS
        var elem = document.getElementById('slides');
        window.mySwipe = Swipe(elem, {
            //startSlide: 4,
            //auto: 3000,
            //continuous: true,
            //disableScroll: true,
            //stopPropagation: true,
            //callback: function (index, element) { },
            //transitionEnd: function (index, element) { }

        });

        // with jQuery
        window.mySwipe = $('#slides').Swipe().data('Swipe');

</script>