Jquery 创建触摸滑块

我想让我的滑块在触摸屏上工作。用户必须能够滑动图像。我需要它在平板电脑和手机上工作。我试着用$（“.portfolio overlay”）。刷卡，但没用，我不知道我是否做错了什么

html

jquery

    var triggers = $('.triggers li');
var images = $('.images li');
var lastElem = triggers.length - 1;
var slider = $('.slider .images');
var imgWidth = images.width();
var target;

triggers.first().addClass('selected');
slider.css('width', imgWidth * (lastElem + 1) + 'px');

function sliderResponse(target) {
    slider.stop(true, false).animate({
        'left': '-' + imgWidth * target + 'px'
    }, 300);
    triggers.removeClass('selected').eq(target).addClass('selected');
}

triggers.click(function () {
    if (!$(this).hasClass('selected')) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});
$('.next').click(function () {
    target = $('.triggers .selected').index();
    target === lastElem ? target = 0 : target = target + 1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function () {
    target = $('.triggers .selected').index();
    lastElem = triggers.length - 1;
    target === 0 ? target = lastElem : target = target - 1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('.triggers .selected').index();
    target === lastElem ? target = 0 : target = target + 1;
    sliderResponse(target);
}
var timingRun = setInterval(function () {
    sliderTiming();
}, 5000);

function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function () {
        sliderTiming();
    }, 5000);
}

$(".portfolio-overlay").swipe({

    swipe: function (event, direction, distance, duration, fingerCount) {
        if ($(".portfolio-single").length < 1) return false;
        clearTimeout(timeout);
        directionVAR = direction;
        if (direction == "left") {
            var bannerMove = $(".portfolio-active").index() + 1
            if ($(".portfolio-active").index() == ($(".portfolio-single").length - 1)) {

                bannerMove = 0;
            }
            rotateBanners(bannerMove);
        } else if (direction == "right") {
            rotateBanners(($(".portfolio-active").index() - 1));
        }
    },
    threshold: 0

});

var触发器=$（'.triggers-li'）；
var images=$（'.images li'）；
var lastElem=triggers.length-1；
var slider=$（'.slider.images'）；
var imgWidth=images.width（）；
var目标；
triggers.first（）.addClass（'selected'）；
css（'width'，imgWidth*（lastElem+1）+'px'）；
函数sliderResponse（目标）{
滑块。停止（真、假）。设置动画({
'左'：'-'+imgWidth*target+'px'
}, 300);
触发器.removeClass（'selected'）.eq（target）.addClass（'selected'）；
}
触发器。单击（函数（）{
if（！$（this）.hasClass（'selected'））{
target=$（this.index（）；
滑块响应（目标）；
重置定时（）；
}
});
$（'.next'）。单击（函数（）{
target=$（'.triggers.selected'）.index（）；
target===lastElem？target=0:target=target+1；
滑块响应（目标）；
重置定时（）；
});
$（'.prev'）。单击（函数（）{
target=$（'.triggers.selected'）.index（）；
lastElem=triggers.length-1；
target==0？target=lastElem:target=target-1；
滑块响应（目标）；
重置定时（）；
});
函数slidenting（）{
target=$（'.triggers.selected'）.index（）；
target===lastElem？target=0:target=target+1；
滑块响应（目标）；
}
var timingRun=setInterval（函数（）{
滑动（）；
}, 5000);
函数resetTiming（）{
清除间隔（计时运行）；
计时运行=设置间隔（函数（）{
滑动（）；
}, 5000);
}
$（“.portfolio overlay”）。刷卡({
滑动：功能（事件、方向、距离、持续时间、手指计数）{
如果（$（“.portfolio single”）.length<1）返回false；
clearTimeout（超时）；
方向var=方向；
如果（方向=“左”）{
var bannerMove=$（“.portfolio active”）.index（）+1
如果（$（“.portfolio active”）.index（）==（$（“.portfolio single”）.length-1））{
bannerMove=0；
}
旋转班机（横幅移动）；
}否则如果（方向=“右”）{
轮换投资者（$（“.portfolio active”）.index（）-1）；
}
},
阈值：0
});

---

这是我的jsfiddle:

可能不是您需要的，但我使用iScroll进行触摸滑动。它可以设置为垂直或水平滚动，捕捉点等。它非常灵活，非常可定制。也很容易设置

或

---

您能否上传代码中使用的图像，然后相应地更新小提琴中的链接？这将使你更容易想象你想要完成的事情。这里是更新的JSFIDLE：我不想添加正确的图片，因为这个网站是为其他人设计的，但这不是我需要的

.slider {
float: left;
height: 465px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
overflow: hidden;
position: absolute;
width: 704px;
}
.images {
position:relative;
top:0px;
left:0px;
height:2660px;
}
.images li {
float:left;
position:relative;
top:0px;
left:0px;
}
.triggers {
left: 31.2%;
position: absolute;
top: 76.3%;
}
.triggers li {
float: left;
list-style: none outside none;
}
.triggers .selected {
background: url("../images/white-box.png") no-repeat scroll 0 3px rgba(0, 0, 0, 0);
}
.swipe-for-more {
left: 24.3%;
position: absolute;
top: 76.3%;
}
.control {
position:absolute;
top: 380px;
color:#fff;
cursor:pointer;
}

    var triggers = $('.triggers li');
var images = $('.images li');
var lastElem = triggers.length - 1;
var slider = $('.slider .images');
var imgWidth = images.width();
var target;

triggers.first().addClass('selected');
slider.css('width', imgWidth * (lastElem + 1) + 'px');

function sliderResponse(target) {
    slider.stop(true, false).animate({
        'left': '-' + imgWidth * target + 'px'
    }, 300);
    triggers.removeClass('selected').eq(target).addClass('selected');
}

triggers.click(function () {
    if (!$(this).hasClass('selected')) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});
$('.next').click(function () {
    target = $('.triggers .selected').index();
    target === lastElem ? target = 0 : target = target + 1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function () {
    target = $('.triggers .selected').index();
    lastElem = triggers.length - 1;
    target === 0 ? target = lastElem : target = target - 1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('.triggers .selected').index();
    target === lastElem ? target = 0 : target = target + 1;
    sliderResponse(target);
}
var timingRun = setInterval(function () {
    sliderTiming();
}, 5000);

function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function () {
        sliderTiming();
    }, 5000);
}

$(".portfolio-overlay").swipe({

    swipe: function (event, direction, distance, duration, fingerCount) {
        if ($(".portfolio-single").length < 1) return false;
        clearTimeout(timeout);
        directionVAR = direction;
        if (direction == "left") {
            var bannerMove = $(".portfolio-active").index() + 1
            if ($(".portfolio-active").index() == ($(".portfolio-single").length - 1)) {

                bannerMove = 0;
            }
            rotateBanners(bannerMove);
        } else if (direction == "right") {
            rotateBanners(($(".portfolio-active").index() - 1));
        }
    },
    threshold: 0

});