![幻灯片引导轮播之间的空白]( "幻灯片引导轮播之间的空白")
本文介绍了幻灯片引导轮播之间的空白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用引导轮播作为网站主页上的滑块.
当轮播自动滑动时没有问题，但只要我点击下一个和上一个箭头，幻灯片之间就会出现 ±140 像素宽的空白.
我检查了 css 并删除了 HTML 中的所有空格，但我一点运气都没有.
轮播 HTML:
<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>你好.我是洛雷姆.我是一个慢炊具.</h2><span class="clearfix">而且我很快改变世界</span><a class='fresco cta' data-fresco-caption="Lorem | How It Works" data-fresco-group='example' href='https://vimeo.com/105705114'>它是如何工作的</a＞
<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"></视频>
<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>了解 Lorem.</h2><span class="clearfix">并了解 Lorem 故事</span><a class="cta" href="/Pages/SarahsStory">认识 Lorem</a>
<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>
网站链接:http://bit.ly/1BcaEb8 - 点击南非及其主要旋转木马/滑块
解决方案
找出问题所在.我有自定义 CSS .left{float:left;} 和 .right{float:right;}
当旋转木马滑动时，它会向包含的 div 添加左右类.删除了我的 CSS 中的左右浮动 - 问题解决了 :)
I am using the bootstrap carousel for a slider on the home page of a website.
When the carousel slides automatically there is no problem but as soon as I click the next and prev arrows a ±140px wide white space appears between the slides.
I have inspected the css and removed all white space in the HTML but I'm having no luck at all.
Carousel 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>
Link to website: http://bit.ly/1BcaEb8 - Click on South Africa and its the main carousel / slider
解决方案
Figured out what the problem was. I had custom CSS .left{float:left;} and .right{float:right;}
When the carousel slides it adds classes of left and right to the containing div. Removed the left and right floats in my CSS - problem solved :)
这篇关于幻灯片引导轮播之间的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！