터치 슬라이더가 작동하지 않습니다.

터치 스크린에서 작동하도록 슬라이더를 얻으려고 했으므로 touchSwipt라는 플러그인을 발견했습니다. 여기에 내가 원하는 방식의 데모 링크가 있습니다.터치 슬라이더가 작동하지 않습니다.

이 내가 그것을 내 자신의 물건을 추가 할 때 난 그냥 복사 데모의 HTML을 붙여하지만, 경우에 작동

를 본 사이트입니다 작동하지 않습니다. 다음은 JSFiddle입니다. 여기

여기

   <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; 
}

내 HTML과이

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 

});

출처

2014-02-27 user3095193

시도 할 DOM 준비 처리기 $(function() { }); 내부 코드를 포장 내 jQuery를하다 모든 DOM (Document Object Model)이 JavaScript 코드를 사용할 준비가되었는지 확인하십시오. 실행.

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

또는 전체 페이지 (이미지 또는 iframe이) 확인 $(window).load(function() { ... }) 내부 코드를 포장뿐 아니라 DOM이 준비

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

출처

2014-02-27 14:38:42 Felix

터치 슬라이더가 작동하지 않습니다.

답변

관련 문제