Bootstrap轮播显示下一张幻灯片的一部分，如何删除隐藏的部分？

如何解决Bootstrap轮播显示下一张幻灯片的一部分，如何删除隐藏的部分？

我已经设置了一个Bootstrap传送带，其中显示了两个幻灯片，然后显示了第三张幻灯片的一部分。如果您查看CodePen，则在整个轮播上都加了一个边框，您会看到需要删除的空白区域，以便轮播可以占据页面的整个宽度。我想将轮播中的第三项保留为仅显示一小部分（例如，第三部分），但要删除其右侧的空白（在边框和按钮/第三块之间），以便将轮播与的边缘对齐页面。

我怀疑答案在于溢出：隐藏；但我无法使它正常工作。任何帮助将非常感激。 CodePen

编辑

我从未设法通过引导程序解决此问题。但是，我确实使用了光滑的设计，如CodePen所示。如果有人想获得相同的效果，我建议使用“猫头鹰轮播”或“光滑”。他们俩的规模也都更好：）

<div class="container" style="display: inline-block; float: right; width:100%">
      <div class="row">
          <div class="col-md-12 center-block" style="padding-left:0">
              <div class="carousel slide" id="myCarousel">
                  <div class="carousel-inner">


                      <div class="item active">
                          <div class="col-xs-4"><a href="#1">
                            <div class="content_wrapper">
                              <div class="panel_wrapper">
                                <img src="https://drive.google.com/u/0/uc?id=14IIfkms_-_agwa-cV1YZpZ3KSZfSXF7a&export=download" class="img-responsive">
                                <div class = 'panel'></div>
                              </div>
                              <img src="https://drive.google.com/u/0/uc?id=1ZvOZQngzmo8v-a3wk1jTCrt-h9Lq2fqH&export=download" class="img-logo">
                              <div class = "text_wrapper">
                                <h4>Pharmaceuticals</h4>
                                <div class='line'></div>
                              </div>
                          </div>
                      </a></div>
                      </div>


                      <div class="item">
                          <div class="col-xs-4"><a href="#1">
                            <div class="content_wrapper">
                              <div class="panel_wrapper">
                                <img src="https://drive.google.com/u/0/uc?id=1NkiQw07YRxnYhhVFsZ19ygkfGh7CDbqo&export=download" class="img-responsive">
                                <div class = 'panel'></div>
                              </div>
                              <img src="https://drive.google.com/u/0/uc?id=1ZvOZQngzmo8v-a3wk1jTCrt-h9Lq2fqH&export=download" class="img-logo">
                              <div class = "text_wrapper">
                                <h4>Toiletries & Cosmetics</h4>
                                <div class='line'></div>
                              </div>
                          </div>
                      </a></div>
                      </div>


                      <div class="item">
                          <div class="col-xs-4"><a href="#1">
                            <div class="content_wrapper">

                              <div class="panel_wrapper">
                                <img src="https://drive.google.com/u/0/uc?id=1UaimYCqWqXCuNiauvGLlGhB-eqk0j2pu&export=download" class="img-responsive">
                                <div class = 'panel'></div>
                              </div>
                              <img src="https://drive.google.com/u/0/uc?id=1ZvOZQngzmo8v-a3wk1jTCrt-h9Lq2fqH&export=download" class="img-logo">
                              <div class = "text_wrapper">
                                <h4>Food & Drink</h4>
                                <div class='line'></div>
                              </div>
                          </div>
                      </a></div>
                      </div>


                       <div class="item">
                          <div class="col-xs-4"><a href="#1">
                            <div class="content_wrapper">
                              <div class="panel_wrapper">
                                <img src="https://drive.google.com/u/0/uc?id=14IIfkms_-_agwa-cV1YZpZ3KSZfSXF7a&export=download" class="img-responsive">
                                <div class = 'panel'></div>
                              </div>
                              <img src="https://drive.google.com/u/0/uc?id=1ZvOZQngzmo8v-a3wk1jTCrt-h9Lq2fqH&export=download" class="img-logo">
                              <div class = "text_wrapper">
                                <h4>placeholder</h4>
                                <div class='line'></div>
                              </div>
                          </div>
                      </a></div>
                      </div>
                  </div>
                  <div class="my-right-button">
                    <div class="greyout"></div>
                    <a href="#myCarousel" data-slide="next" class="carousel_button right">
                      <img src="https://drive.google.com/u/0/uc?id=1C97zsCJHirsOTsl5JSkDfw3IZEBjDYfz&export=download" class='myButton'> 
                    </a>
                </div>
            </div>
        </div>
    </div>
  </div>

.carousel.slide{
  border-style: solid;
}
/* css for custom slide animation,makes every tile just slide one position left*/
.carousel{
  .carousel-inner{
    > .item{
      transition: 500ms ease-in-out left;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }
    
    @media all and (transform-3d),(-webkit-transform-3d) {
      > .item{
        // use your favourite prefixer here
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }
}



/* css for default slide animation
.carousel,.carousel-inner,.carousel-inner > .item {
    overflow: hidden;
}
*/



.carousel-inner:before {
    position:absolute;
    top:0;
    bottom: 0;
    left: 0;
    content:"";
    display:block;
    background-color: #fff;
}
.carousel-inner:after {
    position:absolute;
    top:0;
    bottom:0;
    right: 0;
    left: 82%; /*determines how much of the right tile is shown*/
    content:"";
    display:block;
    background-color:#fff;
}
.carousel-control{
  opacity: 1;
}
/* left carousel button*/
.carousel-control.left{
  background: initial;
}

/* right carousel button*/
.carousel-control.right{
  background: none;
  width: 15%; /* fits to width of third tile*/
  color: #000;
  top: -10px;
  right:18%; /* positions relative to third tile*/
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: none;
  background-image: none;
}
.my-right-button{
  position:absolute;
  right: 0;
  top: 0%;
  left: auto;
  width: 14%; /* fits to width of third tile*/
  height: 100%;
  right:18%; /* positions relative to third tile*/
}

.greyout{
  position: absolute;
  background-image: linear-gradient(to right,rgba(0,0.3) 0,0.9) 100%);
  width: 100%;
  height: 100%;
}

.carousel_button{
  position: absolute;
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myButton{
   max-width: 70%;
   height: auto;
   width: auto; /* ie8 */
}
/*tile background image*/
.img-responsive{
}

/*smaller image scales with screen size
positioned relative to background image (bottom left)*/
.img-logo{
  position:absolute;
  width: 30%;
  margin: 3%;
  height: auto;
  left: 0;
  bottom: 20%;
}

/*wraps the two images together*/
.img_wrapper{
  position: relative;
}

/*caption text*/
.item h4{
  font-size: 1.5vw;
    font-weight: 500;
    margin-top: 15px;
  font-family: MuSEO sans rounded;
  text-decoration: none;
}

/* underline underneath caption*/
.line{
  border-style: solid;
  border-width: 1px;
  width: 20%;
}

/* remove the underline for any links*/
.col-xs-4 a{
  text-decoration: none;
}

/* panel is a div which wraps itself to the background image
it displays itself on top of the image. It contains a background
colour with an opacity so on hover the panel is displayed,it gives effect
that the image is changing colour.

By default the background colour has 100% opacity (it cannot be seen)
On hover it transitions to a different colour/opacity. This gives the fading
in and out effect
*/
.panel{
  width:100%;
  height: 100%; 
  position: absolute;
  top: 0;
  background-color: rgba(26,165,210,0);
}

/* used to wrap the panel to the image*/
.panel_wrapper{
  position: relative;
}

/* wraps the all the content in the tile,adds a background colour
so the hover effect appiles to the caption as well
*/
.content_wrapper{
  background-color: none;
}

.button_wrapper{
  display: inline-block;
  height:100%;
}


/*all below code adds hover transition to tiles*/

.content_wrapper:hover{
  transition: all 0.3s ease;
  background-color: rgba(26,0.9);
}

.content_wrapper:hover .panel{
  transition: all 0.3s ease;
  background-color: rgba(26,0.9);
}

.content_wrapper:hover .line{
  border-color: white;
}

.content_wrapper:hover h4{
  color:white;
}

 $(document).ready(function () {
   
   
   // does not scroll through automatically
    $('#myCarousel').carousel({
        interval: false
    })
   
   // go through each carousel item and append the next two to it
    $('.carousel .item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });
});

解决方法

您需要删除.carousel-inner:after样式（如果是默认样式，则可以添加display:none或修改样式），然后将.my-right-button放在right:0;

这就是您想要的吗？