Html 幻灯片之间的空白引导转盘
我正在使用引导转盘作为网站主页上的滑块 当转盘自动滑动时,没有问题,但只要单击下一个和上一个箭头,幻灯片之间就会出现±140px宽的空白 我已经检查了css并删除了HTML中的所有空白,但我一点运气都没有 旋转木马HTML:Html 幻灯片之间的空白引导转盘,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在使用引导转盘作为网站主页上的滑块 当转盘自动滑动时,没有问题,但只要单击下一个和上一个箭头,幻灯片之间就会出现±140px宽的空白 我已经检查了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="carous
<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>
你好我是洛勒姆。我是个慢性子
炊具。我很快就好了
改变世界
了解洛勒姆,学习洛勒姆的故事
网站链接:-点击南非及其主要的旋转木马/滑块找出了问题所在。我有自定义CSS
.left{float:left;}
和.right{float:right;}
旋转木马滑动时,它会将左右两个类添加到包含的div中。删除了CSS中的左右浮动-问题已解决:)将旋转木马内部溢出设置为可见
.carousel-inner{overflow:visible}
Bootstrap默认为carousel提供CSS,提供0.6s的转换延迟。 此过渡显示两张幻灯片之间的空白 为了隐藏这些空白,我们需要重写css并使用!让它工作起来很重要 bootstrap.css style.css
.carousel-inner>.item {
-webkit-transition: 0s !important;
-o-transition: 0s !important;
transition: 0s !important;
}
将上面的代码(style.css)复制到外部或内部css中,并隐藏那些空白我也遇到过同样的问题。我们需要在过渡时显示上一张幻灯片
.carousel-item-next.carousel-item-left{
display: block !important;
}
您可以牺牲一些宽度:
.carousel-item {
width: 99%;
overflow-x: hidden;
}
在你的链接上没有滑动条,请制作一个workign小提琴,我们可以帮助你:)它是主页上的主横幅/滑动条。请点击南非。是的,我有一些非常类似的东西。这删除了空白,但现在在旋转木马的左侧(在页面的右侧),旧图像现在在其他内容的过渡处。
.carousel-item {
width: 99%;
overflow-x: hidden;
}