Focus issue in Carousel

Active3 hr before
Viewed126 times

8 Answers


When I'm using Nuka Carousel in my component, the input element doesn't get focused unless I add an explicit focus to it on an onClick function.,ex: Unless I add focus explicitly input does not get focused.,The problem is by adding focus I'm not able to click or change my cursor position elsewhere using mouse.

 Pretag team - issue, fix, solve, resolve

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.,If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.,Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

 Pretag team - issue, fix, solve, resolve

i've already set a window event outside nuka carousel,see this sandbox,can't focus on input element

onClick = () => {

      <input id="email"  onClick={this.onClick} />
load more v

Moving keyboard focus to any of the carousel content, including the next and previous slide elements, pauses automatic rotation. Automatic rotation resumes when keyboard focus moves out of the carousel content unless another condition, such as mouse hover, that prevents rotation has been triggered. ,This causes screen readers to automatically announce the content of slides when the next and previous slide buttons are activated., Hovering the mouse over any carousel content pauses automatic rotation. Automatic rotation resumes when the mouse moves away from the carousel unless another condition, such as keyboard focus, that prevents rotation has been triggered.


Hi, I've set an optionset with the skin "Thumbnail: asNavFor" with Center Mode, Infinite Loop sliding, Focus on select, and slideToShow=9. On a node with more than 9 slides, there is no problem but on a node with less than 9 slides, the asNavFor slick carousel is broken as it appears on the following screenshot.,The problem occurs when the total slides less than the slideToShow. But the fix was already provided as mentioned above.,If the provided solution is respected, the broken asnavfor should be centered, and everybody is happy. Your screenshot is left aligned. Meaning the module solution was being overridden and ignored somehow.

IMHO it seems you are looking at the wrong tree.

- // focusOnSelect won't work with empty slide value, so add proper selector.
- // Respects core Grid markups which may wrap .slick__slide within anon DIV.
if (empty($js['slide']) && !empty($js['focusOnSelect'])) {
   -$js['slide'] = ($js['rows'] == 1 && $js['slidesPerRow'] == 1) ? '.slick__slide' : $js['slide']; -
load more v

igx-carousel , Web Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design , Learn & Support Help & API Docs Blogs Technical Support Chat Forums Submit a Request

 Pretag team - issue, fix, solve, resolve

If that’s a little abstract, here’s an interpretation:,Now, when the keyboard is used to tab to the button, there will be a visual indication of the focus:,Doesn’t :focus do this already? Yes, but there are problems. The clearest illustration is a button that fires some JavaScript. Imagine an image carousel with buttons to swap between images. Let’s say you’ve added a tabindex to the buttons so they can be selected with a keyboard, but when you go to test the carousel with your mouse, you see this outline around your gorgeous button:

.element: focus - visible {
   background - color: pink; /* Something to get the user's attention */
load more v

Ask questionsInputs or other elements requiring focus in <Slides> are unfocusable or able to be edited. ,pure-react-carousel version: 1.27.1,react version: 16.13.1

 Pretag team - issue, fix, solve, resolve

Other "carousel-focus" queries related to "Focus issue in Carousel"


Related Questions