Question

如何更改轮播＆＃34;点击区域＆＃34;改变幻灯片。 This click area我想专门更改此点击区域的大小，并且无法真正弄清楚如何操作。我试过改变

.carousel-control中的宽度

但似乎没有用。我错过了需要修改的东西/其他css的东西吗？

从标准引导工具包中：

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background-color: rgba(0, 0, 0, 0);
    filter: alpha(opacity=50);
    opacity: .5;
}

Answer 1

这可能会有所帮助

<div class="container-fluid banner_fluid">
    <div class="carousel slide" data-ride="carousel" id="carousel_slider">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/home_banner_1.jpg" alt="home slide 1" />
            </div>
            <div class="item">
                <img src="images/home_banner_2.jpg" alt="home slide 1" />
            </div>
            <div class="item">
                <img src="images/home_banner_3.jpg" alt="home slide 1" />
            </div>
        </div>
        <div href="#carousel_slider" class="left carousel-control" data-slide="prev">
            <span>
                <img src="images/chevron_left.jpg" />
            </span>
        </div>
        <div href="#carousel_slider" class="right carousel-control" data-slide="next">
            <span>
                <img src="images/chevron_right.jpg" />
            </span>
        </div>
    </div>
</div>

CSS

.banner_fluid {
   padding-left:0;
   padding-right:0;
}

.carousel-control {
position: absolute;
top: 50%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}

Answer 2

我们可以使用height

进行修复

.carousel-control {
   height:0;
   top:50%;
}

尝试使用工作代码段

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.item img {
   width:100%;
}
.carousel-control {
  height:0;
  top:50%;
}

</style>
</head>
<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 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">
      <img src="http://balimanual.com/wp-content/uploads/Bali-Expat-636x318.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="http://balimanual.com/wp-content/uploads/Bali-Expat-636x318.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 3

您需要将宽度应用于.carousel-control {width: 5%;}，并将.carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 90%;}设置如下：

注意：.carousel-inner .item img的宽度如果你想将左右控件放在图片上（不占用空间），可以是100％

＆＃13;

<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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 90%;
      margin: auto;
  }
    
  .carousel-control {
    width:5%;
  }
  </style>


<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Chania" width="460" height="345">
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

＆＃13;

更改bootstrap carousel＆＃34;点击区域＆＃34;

3 个答案: