将文本放在Bootstrap 3中的多项旋转木马中的图像上

时间：2018-01-15 04:57:03

标签： html css twitter-bootstrap

我有一个多项目的引导旋转木马，我想把文字放在这个旋转木马的图像的某些部分。这是我所拥有的CodePen。目前，仅当图像是列出的第一个图像时，文本才会显示。正如您所看到的那样，当您在第一张图像上出现流光文本时，如果您继续向右移动，则如果您继续向左返回，则文本将消失并仅保留在第一张图像上。

HTML：

                           

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="carousel slide multi-item-carousel" id="theCarousel">
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></a></div>
                            <div class="image-content">Streamer</div>
                        </div>

                        <div class="item">
                            <div class="col-xs-4"><a href="#2"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></a></div>
                            <div class="image-content">Streamer</div>
                        </div>

                        <div class="item">
                            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></a></div>
                        </div>

                        <div class="item">
                            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/673ab7/000000" class="image img-thumbnail img-responsive"></a></div>
                        </div>

                        <div class="item">
                            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/4caf50/000000" class="image img-thumbnail img-responsive"></a></div>
                        </div>

                        <div class="item">
                            <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/8bc34a/000000" class="image img-thumbnail img-responsive"></a></div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                    <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>

CSS：

.multi-item-carousel {
    width: 100%;
    height: 100%;
    font-size: 25px;
}

.multi-item-carousel .carousel-inner > .item {
    transition: 500ms ease-in-out left;
}

.multi-item-carousel .carousel-inner .active.left {
    left: -33%;
}

.multi-item-carousel .carousel-inner .active.right {
    left: 33%;
}

.multi-item-carousel .carousel-inner .next {
    left: 33%;
}

.multi-item-carousel .carousel-inner .prev {
    left: -33%;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .multi-item-carousel .carousel-inner > .item {
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
    }
}

.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
    width: 5%;
    background-image: none!important;
    filter: none!important;
    outline: none!important;
    border: 0;
}

.container {
    width: 100%;
}

.carousel {
    padding: 20px 70px;
}

.image {
    border: 0;
    outline: none;
    background: transparent;
}

.image-content {
    top: 5px;
    left: 21px;
    position: absolute;
    color: rgb(225, 225, 225);
    font-size: 11px;
}

body {
    background-color: transparent;
}

2 个答案:

答案 0 :(得分：2)

如果您希望文字显示在特定图片上，则必须将包含文字的div放在您放置图片的col内。检查这是否是你想要实现的目标。

＆＃13;
＆＃13; 
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
    interval: false
});
  
  // for every slide in carousel, copy the next slide's item in the slide.
  // Do the same for the next, next item.
$('.multi-item-carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }   
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo($(this));
    } else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});
＆＃13; 
.multi-item-carousel {
    width: 850px;
    height: 150px;
    font-size: 25px;
}

.multi-item-carousel .carousel-inner > .item {
    transition: 500ms ease-in-out left;
}

.multi-item-carousel .carousel-inner .active.left {
    left: -33%;
}

.multi-item-carousel .carousel-inner .active.right {
    left: 33%;
}

.multi-item-carousel .carousel-inner .next {
    left: 33%;
}

.multi-item-carousel .carousel-inner .prev {
    left: -33%;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .multi-item-carousel .carousel-inner > .item {
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
    }
}

.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
    width: 5%;
    background-image: none!important;
    filter: none!important;
    outline: none!important;
    border: 0;
}

.container {
    width: 100%;
}

.carousel {
    padding: 20px 70px;
}

.image {
    border: 0;
    outline: none;
    background: transparent;
}

.image-content {
    top: 5px;
    left: 21px;
    position: absolute;
    color: rgb(225, 225, 225);
    font-size: 11px;
}

body {
    background-color: black;
}
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="carousel slide multi-item-carousel" id="theCarousel">
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></a>
                                  <div class="image-content">Streamer</div>
                                </div>  
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#2"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></a>
                                  <div class="image-content">Streamer</div>
                                </div>    
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></a></div>
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/673ab7/000000" class="image img-thumbnail img-responsive"></a></div>
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/4caf50/000000" class="image img-thumbnail img-responsive"></a></div>
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/8bc34a/000000" class="image img-thumbnail img-responsive"></a></div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                        <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

请尝试将put text separate div用于col-xs-4 div，每次都会显示您的内容：

<div class="item active">
    <div class="col-xs-4">
      <a href="#1">
        <img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive">
      </a>
      <!-- here-->
      <div class="image-content">Streamer</div>
      <!-- -->
   </div>
   <!--<div class="image-content">Streamer</div>-->
</div>
相关问题
最新问题