Html 引导转盘显示下一张幻灯片的部分，如何删除隐藏部分？

我已经设置了一个引导转盘，其中显示了两张幻灯片，然后是第三张幻灯片的一部分。如果你看一下代码笔，我在整个旋转木马周围放了一个边框，你可以看到需要删除的空白，这样旋转木马就可以占据整个页面的宽度。我希望旋转木马中的第三项只显示一小部分（例如第三项），但删除其右侧的空白（在边框和按钮/第三个平铺之间），以便将旋转木马与页面边缘对齐

我怀疑答案在于溢出：隐藏；但是我不能让它工作。任何帮助都将不胜感激

编辑

我从未在bootstrap中解决过这个问题。但是，我确实使用slick重新设计了它，如图所示：。如果有人想达到同样的效果，我推荐猫头鹰转盘或滑溜。它们的规模也更大：）

---

您需要删除

.carousel-inner:after

样式（如果是默认样式，可能只需添加

display:none

，或者调整样式），然后将

.my-right按钮置于
右侧：0

这就是您想要的？
您需要删除
。旋转木马内部：在
样式之后（可能只需添加
显示：无
，如果是默认样式或调整样式），然后将
。我的右键
放在
右侧：0

这就是你想要的？
谢谢你的回复，但这不是我想要的。我将尝试更好地表达它，我希望保持第三个互动程序只显示一小部分（例如第三个互动程序），但删除其右侧的空白，以便旋转木马在其当前状态下可以占据整个页面宽度。目前它没有占据整个宽度，因为第三块瓷砖的不可见部分仍然存在。谢谢你的回复，这不是我想要的。我将尝试更好地表达它，我希望保持第三个互动程序只显示一小部分（例如第三个互动程序），但删除其右侧的空白，以便旋转木马在其当前状态下可以占据整个页面宽度。目前，由于第三块瓷砖的不可见部分仍然存在，所以它没有占据整个宽度。
<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,0,0.3) 0,rgba(0,0,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,165,210,0.9);
}

.content_wrapper:hover .panel{
  transition: all 0.3s ease;
  background-color: rgba(26,165,210,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));
        }
    });
});