Question

我有一个自举旋转木马，可以一次装入3张幻灯片。我无法将下一个和上一个背景设置为白色，而不是使用渐变。在响应式设计中使用时还需要弄清楚对齐，以便幻灯片在iPhone / Android的移动尺寸下一次只能显示一个，并且如果在幻灯片的开头，则隐藏前一个按钮。

HTML

    <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <div class="col-xs-4">
                <div class="review">
                    <p lang="en" dir="ltr">Model S can take you anywhere, come and test drive <a href="http://t.co/NTad8VVhGB">http://t.co/NTad8VVhGB</a>  <a href="http://t.co/xWlvrnDZMG">pic.twitter.com/xWlvrnDZMG</a>

                    </p>&mdash; Tesla Motors (@TeslaMotors) <a href="https://twitter.com/TeslaMotors/status/652149926000889856">October 8, 2015</a>

                </div>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-4">
                <div class="review">
                     <h4>Review Title here</h4>

                    <p>by reviewer</p>
                    <hr>
                    <p>Content of review here. Content of review here. Content of review here.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

的jQuery

$('#myCarousel').carousel({
    interval: 10000
})

$('.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));
    }
});

CSS

    .review {
    border: 1px solid #eee;
    padding: 5px 10px 5px 10px;
    min-height: 200px;
    max-height: 200px;
    */
}
.carousel-inner .active.left {
    left: -33%;
}
.carousel-inner .active.right {
    left: 33%;
}
.carousel-inner .next {
    left: 33%
}
.carousel-inner .prev {
    left: -33%
}
.carousel-control.left {
    background-color: #fff;
    opacity: 1;
    -webkit-box-shadow: 10px 0 35px -2px #888;
    box-shadow: 10px 0 35px -2px #888;
    height: 200px;
}
.carousel-control.right {
    background-color: #fff;
    opacity: 1;
    -webkit-box-shadow: -10px 0 35px -2px #888;
    box-shadow: -10px 0 35px -2px #888;
    height: 200px;
}

JSFIDDLE：LINK

Answer 1

好的，看完小提琴之后，我想我可能已经猜到了这个问题，

活跃的那个实际上是<iframe>，而似乎＆＃34; 不活动的那个＆＃34;实际上是一个复制的html DOM，所以它不会像iframe一样，因为在本地加载（复制粘贴）一些外来DOM时会有很多变化（CSS，CSS规则优先级等） DOM。

Answer 2

你可以删除你的jquery，你的css并尝试重复每个块的html;它们可以隐藏一些移动尺寸的块。这只是一个想法。

引导轮播的对齐和加载问题

2 个答案: