2017-07-18 106 views
0

您好我試圖使按向上和向下箭頭,我想這代碼這個滑塊移動,但它不能正常如何通過按上,使滑塊移動和向下箭頭

工作的jsfiddle Here

$("body").keydown(function(e) { 
    if(e.keyCode == 38) { // top 
    $(".swiper-slide").animate({ 
     top: "-=518" 
    }); 
    } 
    else if(e.keyCode == 40) { // bottom 
    $(".swiper-slide").animate({ 
     bottom: "+=518" 
    }); 
    } 
}); 
+0

分享的HTML代碼請 – Michael

+0

嗨@邁克爾看看Jsfiddle –

+0

@babuharry請在問題本身發佈完整的代碼。問題需要自我包含,就像外部鏈接失敗一樣,問題將失去其上下文。 –

回答

0

您正在使用的組隊,探索圖書館去下一個和上一張幻燈片的方法(你可以看到這個庫,這裏的整個API文檔:http://idangero.us/swiper/api/

var mySwiper = new Swiper(".swiper-container", { 
    direction: "vertical", 
    loop: false, 
    pagination: ".swiper-pagination", 
    grabCursor: true, 
    speed: 1000, 
    paginationClickable: true, 
    parallax: true, 
    autoplay: false, 
    effect: "slide", 
    mousewheelControl: 1 
}); 

$("body").keydown(function(e) { 
    if(e.keyCode == 38) { // top 
    mySwiper.slidePrev(); 
    } 
    else if(e.keyCode == 40) { // bottom 
    mySwiper.slideNext(); 
    } 
}); 

https://jsfiddle.net/h1atwcyy/

+0

@thanks湯姆,我想我必須通過它 –

2

爲什麼不trigger the click動作,讓鍵盤做同樣的鼠標點擊會做..

$("body").keydown(function(e) { 

    if(e.keyCode == 38) { // top 
    $('.swiper-pagination-bullet-active').prev().trigger('click'); 
    } 
    else if(e.keyCode == 40) { // bottom 
    $('.swiper-pagination-bullet-active').next().trigger('click'); 
    } 
}); 

https://jsfiddle.net/83h6wb5s/5/

+0

哇,它的工作,先生你能解釋我是如何工作在簡單的文字 –

+0

@babuharry如果你使用鍵盤上/下arrown它只是尋找swiper活動鏈接並觸發下一個或上一個元素的點擊事件。所以就像你會點擊元素。沒有別的事要做 – caramba

+0

是的,我看到了,但我沒有再關注,我現在得到它,謝謝很多有一個美好的時光 –

相關問題