幻灯片引导轮播之间的空白 [英] White space between slides bootstrap carousel

查看：27
本文介绍了幻灯片引导轮播之间的空白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用引导轮播作为网站主页上的滑块.

当轮播自动滑动时没有问题，但只要我点击下一个和上一个箭头，幻灯片之间就会出现 ±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 :)

这篇关于幻灯片引导轮播之间的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆