0

I'm using the current stable release of Owl Carousel (1.3.2) for a single item carousel. I have previous and next buttons enabled.

A couple of the items within the carousel have links e.g. <a href="page.html" class="button">Find out more</a>.

When using the keyboard (in Chrome) to tab through the web page, the links inside the carousel obtain focus which is great. However, if the user then uses the previous and next buttons with a mouse to move to the next carousel item, it's empty. All other carousel items after the one containing the link inside it are empty also. No content at all.

When inspecting the carousel using Chrome's DevTools, it actually looks like the carousel isn't moving along even though the links inside an item is focused and visible. it appears to be getting really confused.

Has anyone experienced this sort of thing with Owl Carousel (or any other carousel) before? Is there anything I could try to get the carousel to move on properly if a link inside an item obtains focus?

benspencer
  • 101
  • 3
  • 15

1 Answers1

1

Adding tabindex="0" to each of the carousel's items has helped to improve keyboard navigation a lot. Also, rather than using the default previous and next <div> buttons that Owl Carousel produces, I created my own using <a> instead. Information on how to do that is here: http://owlgraphic.com/owlcarousel/demos/custom.html

These updates have helped to make Owl Carousel much easier to navigate using just a keyboard. All slides are displayed after each keyboard tab press, and any links within a slide obtains focus too. Also, tabbing backwards works well - the slides are displayed in reverse order as the user tabs backwards.

The only problem that remains is that the carousel doesn't 'move on' properly. I.e. pagination doesn't update. Therefore, if the user was to click on the 'next' or 'previous' buttons after tabbing to somewhere in the middle of the slider, blank slides would be displayed (as mentioned in my original query). However, I think with the improved keyboard navigation, this is less of an issue as users are able to view all the content now - they're not missing out on anything by using just a keyboard.

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');
});
benspencer
  • 101
  • 3
  • 15