Question

您好我在我的滑块中使用了bootstrap carousel滑块，但移动响应功能不起作用。这是我的代码：

<div class="mobileimage">   
<div id="myCarousel" class="carousel slide mobilesss" data-ride="carousel">
    <!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="item active">
    <img src="<?php echo base_url();?>theme/slider/1a.jpg"  class="img-responsive">
  </div>

  <div class="item">
    <img src="<?php echo base_url();?>theme/slider/2a.jpg" class="img-responsive">
  </div>

  <div class="item">
    <img src="<?php echo base_url();?>theme/slider/3a.jpg" class="img-responsive">
  </div>
  <div class="item">
    <img src="<?php echo base_url();?>theme/slider/4a.jpg" class="img-responsive">
  </div>
</div>

Answer 1

我已经更新了你的小提琴，看看

.carousel-inner>.item>img {
  height: auto;
  width: 100%;
  margin: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="Container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div id="myCarousel" class="carousel slide mobilesss" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="la.jpg" alt="Los Angeles">
          </div>

          <div class="item">
            <img src="chicago.jpg" alt="Chicago">
          </div>

          <div class="item">
            <img src="ny.jpg" alt="New york">
          </div>

        </div>
      </div>
    </div>

Bootstrap轮播滑块响应不起作用

1 个答案: