Q: How to set the sliding limit of the carousel I would like ask for help about my project. Here is the image like of my project.

My problem is, every time the next image slides, the previous image goes at the back of the "buttons' container". I want that the image won't overlap the buttons' container. This what really happen when it slides.

Here's my 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>`


A: This will probably do the trick:
.carousel-inner {
  position: relative;
  width: 50%; // Using half the page
  overflow: hidden;
}

