jquery - 需要对齐 bootstrap carousel 并使其子弹工作

Question

我有一个需要对齐的文本轮播，也不确定如何激活它的元素符号。

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

对于任何屏幕尺寸，我都需要将它们(文本、名称、元素符号)都放在页面中间。

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>

Answer 1

只需进行一些更改即可使其正常运行:

1) 零索引。 data-slide-to 从 0 开始，而不是从 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