Bootstrap Carousel Indicators can't touchable on ipad

Question

I can't understand what's problem but my carousel indicators not working on Ipad or any touch screen. They work on computer but not on Ipad or Iphone. What can be the problem?

HTML:

<ol class="carousel-indicators grey"> 
    <li data-target="#sidebar-carousel-6" data-slide-to="0" class="active"></li>
    <li data-target="#sidebar-carousel-6" data-slide-to="1"></li>
    <li data-target="#sidebar-carousel-6" data-slide-to="2"></li>
    <li data-target="#sidebar-carousel-6" data-slide-to="3"></li>
    <li data-target="#sidebar-carousel-6" data-slide-to="4"></li>
</ol>

Bootstrap version is 3

Answer 1

The issue is due to click events not bubbling on the li element in safari.

You can make the browser behave by either setting the cursor property to pointer in css or attaching an event handler to the element.

CSS

[data-slide-to] {
    cursor: pointer;
}

JavaScript

$('[data-slide-to]').on('click', $.noop);