需要对齐bootstrap轮播并使其子弹工作

时间：2015-05-05 06:32:08

标签： jquery css twitter-bootstrap twitter-bootstrap-3 carousel

我有一个需要对齐的文本旋转木马，也不确定如何激活其子弹。

通过单击下面的演示链接，您会看到子弹点不在页面中间，并且根据名称和文本的大小，名称和项目符号之间的距离会发生变化。

我需要所有这些（文字，名称，项目符号）位于页面中间，以适应任何屏幕大小。

Demo

Updated demo 

.carousel-content {
    color: black;
    display: flex;
    align-items: center;
}

.name {
    color: black;
    display: block;
    font-size: 20px;
    text-align: center;
}

.mytext {
    border-left: medium none;
    font-size: 24px;
    font-weight: 200;
    line-height: 1.3em;
    margin-bottom: 10px;
    padding: 0 !important;
    text-align: center;
}

.bullets li {
    background: none repeat scroll 0 0 #ccc;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    float: none;
    height: 10px;
    width: 10px;
}

.bullets li:last-child {
    margin-right: 0;
}

.bullets li {
    border-radius: 1000px;
}
<div id="carousel-example" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="row">
        <div class="col-xs-offset-3 col-xs-6">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="carousel-content">
                        <div>
                            <h3>#1</h3>
                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                            <h3>#2</h3>
                            <p>This is another much longer item. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                            <h3>#3</h3>                            
                            <p>This is the third item.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
 <a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>

        setCarouselHeight('#carousel-example');

        function setCarouselHeight(id) {
            var slideHeight = [];
            $(id + ' .item').each(function() {
                // add all slide heights to an array
                slideHeight.push($(this).height());
            });

            // find the tallest item
            max = Math.max.apply(null, slideHeight);

            // set the slide's height
            $(id + ' .carousel-content').each(function() {
                $(this).css('height', max + 'px');
            });
        }

更新

我将子弹的代码更改为以下内容，这会导致它们移动到顶部。 （在文本中间）

<div class="col-xs-offset-4 col-xs-8">
      <ol class="bullets carousel-indicators"> 
        <li class="active" data-target="#carousel-example" data-slide-to="1"></li>
        <li class="" data-target="#carousel-example" data-slide-to="2"></li>
        <li class="" data-target="#carousel-example" data-slide-to="3"></li>
        </ol>

8 个答案:

答案 0 :(得分：11)

只需进行一些更改即可完成所有工作：

1）零索引。从0开始data-slide-to，而不是从1开始：

<ol class="bullets carousel-indicators"> 
    <li ... data-slide-to="0"></li>
    <li ... data-slide-to="1"></li>
    <li ... data-slide-to="2"></li>
</ol>

2）幻灯片填充。为子弹的幻灯片添加一些额外的填充：

.carousel-content {
    ...
    padding: 20px 0 50px 0;
}

3）子弹偏移。减少底部子弹偏移以使其更好看：

.bullets {
    ...
    bottom: 10px;
}

Demo

Demo

答案 1 :(得分：4)

首先。将您的项目符号更改为

    <ol class="bullets carousel-indicators"> 
      <li class="active" data-target="#carousel-example" data-slide-to="0"></li>
      <li class="" data-target="#carousel-example" data-slide-to="2"></li>
      <li class="" data-target="#carousel-example" data-slide-to="1"></li>
    </ol>

Javascript从0开始计算

我为子弹和滑块容器添加了一些css。我把子弹移到了父div的后面。它似乎有用了

http://jsfiddle.net/gfcnqzy2/17/

答案 2 :(得分：3)

在.bullets元素中尝试此规则：

.bullets {
    margin: 0;
    padding: 0;
    text-align: center;
}

将包装器的偏移更改为2：

<div class="col-xs-offset-2 col-xs-8">

此外，从ol：

重置边距和填充 
ol {
   margin: 0;
   padding: 0;
}

检查DEMO

答案 3 :(得分：3)

要使子弹工作，您可以将每个列表项的一个属性赋予data-target="#myCarousexxx"。它将自动工作，无需编写脚本。

将一个类添加到项目符号列表carousel-indicators。

的UL

您的data-slide-number应为data-slide-to

让它好兄弟。不需要css它会自动对齐。研究bootstarp。

Demo

答案 4 :(得分：3)

 <div class="col-xs-offset-4 col-xs-8">
      <ol class="bullets">
        <li class="active" data-slide-number="1"></li>
        <li class="" data-slide-number="2"></li>
        <li class="" data-slide-number="3"></li>
        </ol>
  </div>

抵消子弹，或移动内容区域以跨越整个宽度

答案 5 :(得分：3)

<强> CSS 

.col-xs-offset-4 {
  /* margin-left: 33.33333333%; */
}
.col-xs-8 {
  /* width: 66.66666667%; */
}
  

以上两项导致您的Div显示在右侧

所以要克服那些使用下面的CSS代码我已经攻击了一些选择器所以它不会影响你的bottstrap.css 

 .row .col-xs-offset-4 {
       margin-left: 0;
    }
    .row .col-xs-8 ,.carousel-content div{
       width:100%;
    }
.carousel-content{
    text-align:center;

}


  .bullets.carousel-indicators{
      position:initial;
       padding:0;
       margin:0;
        width:100%;
}
  
      
  1. 上述css修改了这两个类的margin和width。
    2.   
  2. div内的孩子carousel-content未将其全部宽度视为父级，因此我们使用width属性。
    3.   
  3. text-align让事情在Div
    4. 的中心对齐   
  4. padding＆amp; margin将额外的默认CSS移除到carousel-indicators
    5.   

DEMO

答案 6 :(得分：3)

您的主要问题是您的标记与Bootstrap对其轮播所需的标记略有不同。因此，您需要更改以下内容：

  1. 您的carousel-indicators ol应嵌套在.carousel下方，而不是carousel-inner。这不仅可以解决指标的对齐问题，还可以使它们按预期显示（即＆＃34;活动＆＃34;指示符将突出显示）。
  2. 轮播中不需要行和列，因为您可以使用text-align: center;对齐所有内容。实际上，col-xs-offset-4 col-xs-8是导致文本未对齐的原因，因为它占用了8列但在页面左侧留下了4列空白。

    3. 因此更新后的标记如下：

    <div id="carousel-example" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <div class="carousel-content">
                <div>
                    <p class="mytext">This is the text of the first item.</p>   <span class="name">This is the first name</span>

                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div>
                    <p class="mytext">This is the text of the second item.This is the text of the second item.</p>  <span class="name">This is the second name, This is the second name</span>

                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div>
                    <p class="mytext">This is the text of the third item.This is the text of the third item.This is the text of the third item.</p> <span class="name">This is the third name,This is the third name,This is the third name,</span>

                </div>
            </div>
        </div>
    </div>
</div>

    您还会注意到，使用此标记，您将需要最少的额外CSS，因为您需要做的大部分工作将由Bootstrap CSS处理。

    请参阅updated demo。

    作为旁注，根据Bootstrap，你应该使用carousel-caption类来获取你需要在转盘中插入的任何文本（现在在carousel-content中），因为Bootstrap假定你的轮播还将为每个项目提供图像。但是，由于情况并非如此，我保留了carousel-content类，因为carousel-caption没有正确对齐/显示而没有相应的图像。

答案 7 :(得分：3)

使用定制的旋转木马，这是我快速创建的东西的推广。

http://jsfiddle.net/gppg7k6n/

还有一些jquery：

var cont = $('.slides'),
    slide = cont.find('.slide'),
    nav = cont.find('.nav'),
    li = null,
    len = slide.length,
    index = slide.filter('.start').index();

for (var i = 0; i < len; i++) {
    nav.append($('<li>'));
}

li = nav.find('li');

showSlide();
slide.stop().eq(index).show();

function updateLi() {
    li.removeClass('white');
    li.eq(index).addClass('white');
}

function showSlide() {
    slide.stop().fadeOut().eq(index).stop().fadeIn();
    updateLi();
}
cont.click(function () {
    index = ++index % len;
    showSlide();
});

nav.click(function (e) {
    e.stopPropagation();
});

li.click(function (e) {
    index = $(this).index();
    showSlide();
});
相关问题
最新问题