觸摸滑塊不起作用

Question

我試圖讓滑塊在觸摸屏上工作，所以我找到了一個名為touchSwipt的插件。 這是我想要的演示的鏈接。

演示

這是我看到它的地方

鏈接到網站

如果我只復制並粘貼演示的html，它會起作用，但是當我嘗試添加自己的東西時，它將無法工作。 這是JSFiddle。 JSFIDDLE

這是我的html

               <div class="slider-wrapper">
                <div class="slider">
                    <div id="test" class="box">
                    <ul class="images">
                        <li><img width="704px" class="portfolio-active portfolio-single" src="http://s25.postimg.org/keaisiflb/mini_brown_fairy.jpg"></li>
                        <li><img width="704px" class="portfolio-inactive portfolio-single" src="http://s25.postimg.org/xwhf4srqn/mini_blue_fairy.jpg"></li>

                    </ul> 
                    </div>   
                </div>

                <ul class="triggers">
                    <li><img src="http://s25.postimage.org/hj22mxdgr/border_box.png">  </li>
                    <li><img src="http://s25.postimage.org/hj22mxdgr/border_box.png"> </li>

                </ul>

這是我的CSS

.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("http://s25.postimg.org/8cjrzn88b/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;
}

這是我的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);
}

$("#test").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;
            }

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

});

Answer 1

嘗試將代碼包裝在DOM准備處理程序$(function() { }); 確保所有文檔對象模型（DOM）准備就緒，可以執行JavaScript代碼。

$(function() {
    // Your code here
});

或將您的代碼包裝在$(window).load(function() { ... }) ，以確保整個頁面（圖像或iframe）（而不僅僅是DOM）已准備就緒

$(window).load(function() {
    // Your code here
});