설명 변경시 슬라이드 슬라이드를 한 번 클릭

Question

나는 여기 있습니다. 나는 자바 스크립트를 사용하여 onkeypress wannabe 슬라이드 쇼를 만들고있다. 사용 된 코드가 아래에 있습니다. 내가 사용했던 사진에 몇 가지 설명을 추가하고 싶습니다. 현재 사진과 일치하도록 변경하려고합니다. 따라서 "그림 1", 텍스트 "설명 1", "그림 2"및 " 설명 2 "등 ... 어떤 제안을 해주시겠습니까? 도움 주셔서 감사합니다!
PS : 개봉 기꺼이 도와하면 ... 내가 뭘하는지 아무 생각이 없다는 것을 명심하시기 바랍니다

let images = ["https://static.boredpanda.com/blog/wp-content/uploads/2017/03/189578_205761_4_-Yuan-Peng-China-Shortlist-Professional-Sport-2017-Sony-World-Photography-Awards-58c68fa8b4532__880.jpg", 
     "https://static.boredpanda.com/blog/wp-content/uploads/2017/03/212367_227257_1_-Adi-Bulboac-Romania-Shortlist-Professional-Architecture-2017-Sony-World-Photography-Awards-58c68fe283e62__880.jpg", 
     "https://static.boredpanda.com/blog/wp-content/uploads/2017/03/217609_232497_0_-Wilson-Lee-China-Shortlist-Open-Competition-Still-Life-2017-Sony-World-Photography-Awards-58c68fed34611__880.jpg"]; 

    function changeImage(dir) { 
     let img = document.getElementById("imgClickAndChange"); 
     img.src = images[images.indexOf(img.src) + (dir || 1)] || images[dir ? images.length - 1 : 0]; 
    } 

    document.onkeydown = function(e) { 
     e = e || window.event; 
     if (e.keyCode == '37') { 
      changeImage(-1) //left <- show Prev image 
     } else if (e.keyCode == '39') { 
      // right -> show next image 
      changeImage() 
     } 
    } 

Answer 1

이 jQuery-sliderResponsive를 다운로드하고 키를 백업에있는 함수를 호출 할 수 있습니다 키를 눌러. 코드는이 슬라이더에서만 작동합니다.

document.onkeydown = function(e) { 
    e = e || window.event; 
    if (e.keyCode == '37') { 
     prevSlide(); // Previous 
    } else if (e.keyCode == '39') { 
     nextSlide(); // Next 
    } 
} 

Answer 2

기존 플러그인을 사용해야합니다. 그러나이 경로로 이동하려면 설명이 포함 된 다른 배열을 위치와 일치시킬 수 있습니다. 이 같은 뭔가 작업을해야합니다 : https://jsfiddle.net/fwgk7stt/

: 여기

let descriptions = ["It hurts!", "This is a room with small chairs (no kidding!!)", "Painting?"]; 
let currentIndex = 0; 

function changeImage(dir) { 
     // Get the index 
    let img = document.getElementById("imgClickAndChange"); 
    let newIndex = currentIndex + dir; 
    currentIndex = images[newIndex] != undefined ? newIndex : (dir > 0 ? 0 : images.length-1); 

    // Change the picture 
    img.src = images[currentIndex]; 

    // Change the description 
    document.getElementById("description").innerHTML = descriptions[currentIndex]; 
} 

document.onkeydown = function(e) { 
    e = e || window.event; 
    if (e.keyCode == '37') { 
     changeImage(-1) //left <- show Prev image 
    } else if (e.keyCode == '39') { 
     // right -> show next image 
     changeImage(1) 
    } 
} 

이 예제 코드