Bootstrap 载玻片引导转盘之间的白色区域

e5njpo68 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(6)|浏览(107)

我正在使用 Bootstrap 轮播作为网站主页上的滑块。
当转盘自动滑动时，没有问题，但只要我单击下一个和上一个箭头，幻灯片之间就会出现± 140 px宽的白色。
我已经检查了CSS并删除了HTML中的所有白色，但我一点运气都没有。
轮播HTML：

<div class="clearfix row slider">
<div class="clearfix carousel slide col-lg-12 col-md-12 col-sm-12 col-xs-12" data-ride="carousel" id="carousel-example-generic">
    <div class="carousel-inner">
        <div class="clearfix item active" style='background: url("/Content/Images/media/carousel/hero-test.jpg") no-repeat;'>
            <div class="clearfix max-width carousel-caption">
                <h2>Hello. I'm Lorem. I'm a Slow
                Cooker.</h2><span class="clearfix">And I'm quickly
                changing the world</span> 
                <a class='fresco cta' data-fresco-caption="Lorem | How It Works" data-fresco-group='example' href='https://vimeo.com/105705114'>How It Works</a>
            </div>
            <video autoplay="" class="bgvid" loop="" poster="/Content/Images/default/video-bg.jpg">
                <source src="/Content/Images/media/bkvideo/1_Lorem-marquee.mp4" type="video/webm">
                <source src="polina.html" type="video/mp4">
            </video>
        </div>
        <div class="clearfix item" style='background: url("/Content/Images/media/carousel/1_marquee-2.jpg ") no-repeat;'>
            <div class="clearfix max-width carousel-caption">
                <h2>Get to know Lorem.</h2><span class="clearfix">And learn the Lorem Story</span>
                <a class="cta" href="/Pages/SarahsStory">Meet Lorem</a>
            </div>
        </div>
    </div>
    <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"><span><img alt=" " src="/Content/Images/default/arrow-slider.svg"></span></a>
    <a class="right carousel-control" data-slide="next" href="#carousel-example-generic"><span><img alt=" " src="/Content/Images/default/arrow-slider.svg"></span></a>
</div>

网站链接：http://bit.ly/1BcaEb8-点击南非及其主转盘/滑块

twitter-bootstrap

来源：https://stackoverflow.com/questions/27265586/white-space-between-slides-bootstrap-carousel

6条答案

按热度按时间

voj3qocg1#

将转盘内部溢出设置为可见。

.carousel-inner{overflow:visible}

赞(0）回复(0）举报 2022-12-08

jq6vz3qz2#

找到了问题所在。我有自定义的CSS .left{float:left;}和.right{float:right;}
当carousel滑动时，它会将left和right的类添加到包含的div中。删除了CSS中的left和right float-问题解决了：）

赞(0）回复(0）举报 2022-12-08

mpbci0fu3#

Bootstrap默认为CSS的carousel提供了0.6秒的过渡延迟。这个过渡显示了两张幻灯片之间白色为了隐藏这些空白，我们需要通过重写css并使用！important来删除过渡。

Bootstrap .css*

.carousel-inner>.item {
    display: none;
    position: relative;
    -webkit-transition: .6s ease-in-out left;
    -o-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left;
}

样式.css

.carousel-inner>.item {
    -webkit-transition: 0s !important;
    -o-transition: 0s !important;
    transition: 0s !important;
}

复制上面的代码（style.css）到你的外部或内部css并隐藏白色

赞(0）回复(0）举报 2022-12-08

svmlkihl4#

我也遇到了同样问题我们需要展示上一张过渡幻灯片

.carousel-item-next.carousel-item-left{
  display: block !important;
}

赞(0）回复(0）举报 2022-12-08

axkjgtzd5#

您可以牺牲一些宽度：

.carousel-item {
  width: 99%;
  overflow-x: hidden;
}

赞(0）回复(0）举报 2022-12-08

qxsslcnc6#

上面的答案都没有解决我的问题。这就是我所做的消除图像之间的差距。
在您的
.转盘式物品

.carousel-item{
    float:none; 
    transition: 0s !important;
}

这将删除差距，还将删除图像切换幻灯片动画/过渡。

赞(0）回复(0）举报 2022-12-08

我来回答

Bootstrap 载玻片引导转盘之间的白色区域

6条答案

相关问题

热门标签

最新问答