캐 러셀 기능에 키보드 바인딩을 어떻게 추가합니까? - jQuery

Question

구현 here을 볼 수 있습니다.

내 키보드의 왼쪽 및 오른쪽 화살표를 사용하여 이미지를 순환시키고 싶습니다. jQuery 나 CSS를 사용하여 어떻게 할 수 있습니까?

html로는 다음과 같습니다

<div id="slider-code"> 
     <a class="buttons prev" href="#"></a> 
     <div class="viewport"> 
      <ul class="overview">   
       <li><img src="images/red-stripe.jpg" /></li> 
       <li><img src="images/red-stripe-bw.jpg" /></li> 
       <li><img src="images/red-stripe-red.jpg" /></li>    
       <li><img src="images/red-stripe-dark.jpg" /></li> 
       <li><img src="images/red-stripe.jpg" /></li> 
       <li><img src="images/red-stripe-red.jpg" /></li> 
       <li><img src="images/red-stripe-dark.jpg" /></li>   
      </ul>  
     </div> 
     <a class="buttons next" href="#"></a> 
    </div> 

CSS의 :

#slider-code { 
    height: 125px; 
    overflow:hidden; 
    margin: auto; /* top, right, bottom, left */ 
} 

#slider-code .viewport { 
/* margin-left: auto; -- With this enabled, the arrows don't work. 
    margin-right: auto; */ 
    margin: 0 auto; /* top, right, bottom, left */ 
    width: 540px; 
    height: 125px; 
    overflow: hidden; 
    position: relative; 
    float: left; 

} 

#slider-code .viewport .overview img { 
    border: 3px solid #f6f6f7; 
    margin: 0 auto; 
    -moz-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    float: left; 
    position: absolute; 
} 

#slider-code .buttons { 
    display: block; 
    margin: 0 auto; /* top, right, bottom, left */ 
    float: left; 
    vertical-align: middle; 
} 

#slider-code .prev { 
    width: 32px; 
    height: 32px; 
    background: transparent url('../images/left-arrow.png') no-repeat 0 0; 
    vertical-align: middle; 
    margin: 0 0 0 5px; /* top, right, bottom, left */ 
    position: relative; 
/* top: 190.5px; */ 
} 

#slider-code .next { 
    width: 32px; 
    height: 32px; 
    background: transparent url('../images/right-arrow.png') no-repeat 0 0; 
    margin: 0 0 0 5px; /* 30px 0 0 10px; */ 
    vertical-align: middle; 
    position: relative; 
} 

#slider-code .disable { 
    /* for IE */ 
    filter:alpha(opacity=40); 
    /* for everything else */ 
    opacity:0.4; 
} 

#slider-code .overview { 
    list-style: none; 
    position: absolute; 
    padding: 0; 
    margin: 0 auto; 
    left: 0; 
    top: 0; 
} 


#slider-code .overview li { 
    float: left; 
    margin: 0 4px auto; /* top, right, bottom, left */ 
    padding: 1px; 
    height: 121px; 
    border: 0px solid #dcdcdc; 
    width: 236px; 
} 

.view_name { 
    font-family: "Helvetica", serif; 
    color: #f9f4c0; 
    font-style: normal; 
    font-weight: bold; 
    font-size: 11px; 
    word-spacing: 0px; 
    letter-spacing: 0px; 
    background: #1a1a1a;  
    padding: 1px 3px 1px 3px; /* top, right, bottom, left */   
    -moz-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

ul.overview li { 
    position: relative; 
} 

필요한 JS는 다음과 같습니다

var oImg, sliderCode, sliderViewPort, win_width; 
    var oImg_height, oImg_width, oImg_ratio, tImg_width, tImg_height, sliderCode_w, sliderCode_h, ul_width; 
    var rImg_width, rImg_height, view_new_w, view_new_h, li_w, rUl_width; 

    function setUp(numImages) { 
     oImg_height = oImg.height(); //size of original image height 
     oImg_width = oImg.width(); //size of original image width 
     oImg_ratio = oImg_height/oImg_width; //aspect ratio of original image 
     tImg_width = (win_width * 0.915)/num_of_images; // Target image width = (90% of the window)/2 
     tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio. 
     sliderCode_w = $('#slider-code').width(); 
     sliderCode_h = $('#slider-code').height(); 
     var ul_width = $('#slider-code .viewport ul').width(); 

     // console.log("Original Image Height: ", oImg_height, " Original Image Width: ", oImg_width, " Original Image Aspect Ratio: ", oImg_ratio, " Slider Code Width: ", sliderCode_w, " Slider Code Height: ", sliderCode_h, " Window Width: ", win_width, " UL Width: ", ul_width, " Target Image Width: ", tImg_width, " Target Image Height: ", tImg_height); 

     sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height }); //resizes the images 

     rImg_width = sliderCode.width(); // size of resized image width 
     rImg_height = sliderCode.height(); // size of resized image width 

     $('#slider-code .next').css({ 'top': rImg_height/2 }); //This needs to be resolved for various size windows 
     $('#slider-code .prev').css({ 'top': rImg_height/2 }); 
     $('#slider-code').css({ 'width': '100%', 'height': rImg_height + 10 }); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height 
     $('#slider-code .viewport').css({ 'width': win_width * 0.94, 'height': rImg_height + 10 }); 
     $('#slider-code .overview li').css({ 'width': rImg_width + 10 }); 
     $('#edit-image-nav img').css({ 'width' : '42px', 'height' : '30px', 'display' : 'block' }); //This was done because without it, something else is resizing the images to a large size. I was not able to trace it, but in a re-factor, I should trace what is resizing it and remove that, then remove this. 
     //$('#slider-code .overview li img:not("#edit-image-nav")').css({ 'width': rImg_width + 10 }); 
     view_new_w = sliderViewPort.width(); 
     view_new_h = sliderViewPort.height(); 
     li_w = $('#slider-code .overview li').width(); 
     rUl_width = $('#slider-code .viewport ul').width(); 

     // console.log("Viewport New Width: ", view_new_w, view_new_h, " List Item Width: ", li_w, " Resized Image Width: ", rImg_width, " Resized Image Height: ", rImg_height, " Resized UL Width: ", rUl_width); 

     $('#slider-code').tinycarousel({ controls: true, animation: true, display: 1 }); 

    } 

$(window).load(function() { 

//Cache Some Common Elements 
     oImg = $('#slider-code .viewport .overview img:eq(1)'); 
     sliderViewPort = $('#slider-code .viewport'); 

     // --------------------------- Begin Comparison Code --------------------------------------------------------   
     win_width = $(window).width(); 
     num_of_images = 2; //The number of images expected in view (2 for 2-up, 3 for 3-up, etc.) The default value is 2. 

     $("#viewbar img").click(function(e) { 
      num_of_images = parseInt($(this).attr("data-id"), 10); // This accepts the integer associated with the navbar.   
      $('#viewname').text(num_of_images + '-up'); 

      setUp(num_of_images); 

      e.preventDefault(); 
     }); 

     //Default set up 
     setUp(num_of_images); 

     // --------------- End Comparison Code -------------------------------------------------------------------------- 

}) 

당신이 아무것도 필요하면 알려주세요.

Answer 1

$(document).keydown(function(eventObject) { 
    if(eventObject.which==37) {//left arrow 
     $('#slider-code .prev').click();//emulates click on prev button 
    } else if(eventObject.which==39) {//right arrow 
     $('#slider-code .next').click();//emulates click on next button 
    } 
}); 

당신은 ('. 뷰포트를') $와 $ (문서)를 교환 할 수는 있지만 다음 < DIV 클래스 = "뷰포트"

Answer 2

원하는대로 3 가지 jQuery 키보드 옵션, keypress, keydown 및 keyup이 있습니다. 너는 이렇게 할 수있다. 다음의 키가 occures >에 초점이 있어야합니다

$('.viewport').keydown(function(e){ 
    if (e.keyCode == 37){ //left arrow clicked 
     //do something 
    } else if (e.keyCode == 39){//right arrow clicked 
     //do something else 
    } 
});