올빼미 회전 목마가있는 항목이 키보드로 탭 안에서 탭 내부로 이동하는 경우

Question

단일 항목 회전 목마에 올빼미 회전 목마 (1.3.2)의 현재 안정 버전을 사용하고 있습니다. 나는 이전 및 다음 버튼을 사용할 수 있습니다.

회전 목마 내의 몇 가지 항목에는 링크가 있습니다. <a href="page.html" class="button">Find out more</a>.

크롬에서 키보드를 사용하여 웹 페이지를 탭하면 캐 러셀 내부의 링크가 중점을받습니다. 그러나 사용자가 마우스로 이전 및 다음 버튼을 사용하여 다음 회전 목마 항목으로 이동하면 해당 항목은 비어 있습니다. 그 안에 링크가 포함 된 다른 모든 회전 목마 항목도 비어 있습니다. 전혀 내용이 없습니다.

Chrome의 DevTools를 사용하여 회전식 문구를 검사 할 때 항목 내부의 링크가 집중되어 표시 되더라도 실제로 회전식 회전이 이동하지 않는 것처럼 보입니다. 그것은 정말로 혼란스러워지고있는 것처럼 보입니다.

누구나 올빼미 회전 목마 (또는 다른 회전식 회전 목마)와 같은 종류의 것을 경험 한 적이 있습니까? 항목 내부의 링크가 포커스를 얻으면 회전식 캐롤라이나가 제대로 움직 이도록 할 수있는 방법이 있습니까?

Answer 1

각 캐 러셀의 항목에 tabindex = "0"을 추가하면 키보드 탐색 기능이 향상되었습니다. 또한 올빼미 회전식 메뉴가 생성하는 기본 이전 및 다음 <div> 버튼을 사용하지 않고 대신 <a>을 사용하여 직접 만들었습니다. 그 방법에 대한 정보는 여기에 있습니다 : http://owlgraphic.com/owlcarousel/demos/custom.html

이러한 업데이트는 올빼미 회전 장치가 키보드 만 사용하여 훨씬 쉽게 탐색 할 수 있도록 도와줍니다. 모든 슬라이드는 키보드 탭을 누를 때마다 표시되며 슬라이드 내의 모든 링크도 포커스를 얻습니다. 또한 뒤로 탭하면 잘 작동합니다. 슬라이드는 사용자 탭과 역순으로 표시됩니다.

유일한 문제는 캐 러셀이 제대로 움직이지 않는다는 것입니다. 나는. 페이지 매김이 업데이트되지 않습니다. 따라서 사용자가 슬라이더의 중간에 탭으로 이동 한 후 '다음'또는 '이전'버튼을 클릭하면 빈 슬라이드가 표시됩니다 (원래 검색어에서 언급했듯이). 그러나 향상된 키보드 탐색 기능을 사용하면 사용자가 지금 모든 콘텐츠를 볼 수 있으므로 문제가 발생하지 않으며 키보드 만 사용하여 누락 된 것이 아닙니다.

HTML :

<div class="slider-wrapper"> 

    <div class="owl-nav"> 
     <a href="#" class="prev">Previous</a> 
     <a href="#" class="next">Next</a> 
    </div> 

    <div class="slider"> 

     <div tabindex="0"> 
      <h1>Content</h1> 
      <p>Content</p> 
     </div> 

     <div tabindex="0"> 
      <h1>Content</h1> 
      <p><a href="page.html" class="button">Find out more</a></p> 
     </div> 

     <div tabindex="0"> 
      <h1>Content</h1> 
     </div> 

    </div> 

</div> 

jQuery를 :

var owl = $(".slider"); 

owl.owlCarousel({ 
    singleItem: true, 
    theme: "slider", 
    mouseDrag: false, 
    slideSpeed : 750 
}); 

$(".owl-nav .next").click(function(e){ 
    e.preventDefault(); 
    owl.trigger('owl.next'); 
}); 

$(".owl-nav .prev").click(function(e){ 
    e.preventDefault(); 
    owl.trigger('owl.prev'); 
});