Unable to focus on Input Field in Bootstrap Carousel

Question

I am unable to focus on any input field inside bootstrap carousel.

No matter how many times you click on it, the input field is not getting focused.

I even tried giving z-index to the input field but it still doesn't get focused.

You can check the error by running the snippet below.

$(document).ready(function(){

$(".carousel").swipe({

  swipe: function(event, direction, distance, duration, fingerCount, fingerData) {

    if (direction == 'left') $(this).carousel('next');
    if (direction == 'right') $(this).carousel('prev');

  },
  allowPageScroll:"vertical"

});

});

.carousel-indicators {
  position: absolute !important;
  bottom: -100px !important;
}

.carousel-indicators li {
  background-color: green;
  border: 1px solid green !important;
}

.carousel-inner>.item>div {
  padding: 30px;
}

.carousel-inner>.item>div>div {
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
<div class="container" id="skill-builder">

    <div class="row">

      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <div>
              <p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
              <div>
                <img src="./assets/questions/1-question.jpg" alt="">
              </div>
              <div>
                <input type="text" placeholder="Enter Answer" name="answer">
              </div>
              <div>
                <button>Confirm</button>
              </div>
            </div>
          </div>
          <div class="item">
            <div>
              <p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
              <div><img src="./assets/questions/2-question.png" alt=""></div>
              <div>
                <input type="text" placeholder="Enter Answer" name="answer2">
              </div>
              <div>
                <button>Confirm</button>
              </div>
            </div>
          </div>
          <div class="item">
            <div>
              <p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
              <div><img src="./assets/questions/1-question.jpg" alt=""></div>
            </div>
          </div>
        </div>
    
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    
    </div>

  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Enable The Touch Slider in Touch Device Only    

$(document).ready(function() {
                if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                    $(".carousel").swipe({

                        swipe: function(event, direction, distance, duration, fingerCount, fingerData) {

                            if (direction == 'left') $(this).carousel('next');
                            if (direction == 'right') $(this).carousel('prev');

                        },
                        allowPageScroll: "vertical"

                    });
                }


            });

Answer 2

Change touchSwipe version from 1.6.18 to 1.6.4