Question

我想请求关于我的项目的帮助。这是我的项目的图像。

我的问题是，每次下一张图片滑动时，前一张图片都会出现在“按钮”容器的后面。我希望图像不会与按钮的容器重叠。这是滑动时真正发生的事情。

这是我的CSS

`

.carousel {
  position: relative;
  }



.carousel-inner {
 position: relative;
 width: 100%;
 overflow: hidden;

  /*z-index: -1;*/
}

.carousel-inner > .item {
 position: relative;
 display: none;
-webkit-transition: 0.6s ease-in-out left;
 transition: 0.6s ease-in-out left;
 z-index: -1;

 }

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  height: auto;
  width:50%;
  margin-left:170px;
  z-index: -1;
 }

 .carousel-inner > .active,
 .carousel-inner > .next,
 .carousel-inner > .prev {
   display: block;
   z-index: -1;
  }

 .carousel-inner > .active {
  left: 0;
  z-index: -1;
  }

 .carousel-inner > .next,
 .carousel-inner > .prev {
   position: absolute;
   width: 100%;
   z-index: -1;

  }

.carousel-inner > .next {
 left: 100%;
 z-index: -1;
 }

.carousel-inner > .prev {
 left: -100%;
 z-index: -1;

}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
  z-index: -1;

}

.carousel-inner > .active.left {
    left: -100%;
    z-index: -1;

}

.carousel-inner > .active.right {
 left: 100%;
 z-index: -1;

}

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

}

.carousel-control.left {
 background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 
 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
 background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 
 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
 background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 
 0, 0, 0.0001) 100%);
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 
 0, 0, 0.0001) 100%);
 background-repeat: repeat-x;
 filter: 
 progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', 
 endColorstr='#00000000', GradientType=1);

}

.carousel-control.right {
  right: 0;
  left: auto;
  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 
  0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 
  0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, 
  rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, 
  rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: 
  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', 
  endColorstr='#80000000', GradientType=1);

 }

.carousel-control:hover,
.carousel-control:focus {
  color: red;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
 }

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  left: 35%;
  z-index: 5;
  display: inline-block;
}

.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 50px;
  height: 50px;
  margin-top: -10px;
  margin-left: -10px;
  font-family: serif;
}

.carousel-control .icon-prev:before {
  content: '\2039';
}

.carousel-control .icon-next:before {
  content: '\203a';
}

.carousel-indicators {
  position: absolute;
  top: 500px;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
  transition: 0.001s;
 }

 .carousel-indicators li {
   display: inline-block;
   width: 10px;
   height: 10px;
   margin: 1px;
   text-indent: -999px;
   cursor: pointer;
   border: 1px solid #ffffff;
   border-radius: 10px;
   transition: 0.001s;
 }

 .carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: red;
    transition:0.001s;
    border: 1.5px solid #ffffff
  }

 .carousel-caption {
   position: absolute;
   right: 15%;
   bottom: 20px;
   left: 15%;
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
   color: #ffffff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 }

  .carousel-caption .btn {
     text-shadow: none;
  }

  @media screen and (min-width: 768px) {
   .carousel-control .icon-prev,
   .carousel-control .icon-next {
      width: 30px;
      height: 30px;
      margin-top: -15px;
      margin-left: -15px;
      font-size: 30px;
   }
   .carousel-caption {
      right: 20%;
      left: 20%;
      padding-bottom: 30px;
   }
   .carousel-indicators {
     bottom: 20px;
   }
 }`

my html`

@{
ViewBag.Title = "Home";
}


<div class="bodycontainer">

    <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>
           <li data-target="#mycarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="@Url.Content("/Images/UPCOMING.png")" width="450" 
                height="340" />
            </div>

            <div class="item">
                 <img src="@Url.Content("/Images/CALENDAR.png")" width="450" 
                 height="340" />
            </div>

            <div class="item">
                 <img src="@Url.Content("/Images/HOLIDAYS.png")" width="450" 
                 height="340" />
            </div>
        </div>

       <!-- 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 class="well text-center">
       <p> The only place success comes before work is in the dictionary. 
       </p>
      <dfn /> Vince Lombardi
  </div>
</div>`

Answer 1

这可能会起到作用：

.carousel-inner {
  position: relative;
  width: 50%; // Using half the page
  overflow: hidden;
}

如何设置轮播的滑动限制

1 个答案: