引导传送带对齐和加载问题

我有一个引导传送带，可以一次加载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

来源

2015-10-14 Matt

OK，在看看小提琴后，我想我可能已经猜到了这个问题，

的其中之一就是积极的实际上是一个，而这似乎为“不行的一个“实际上是一个复制的html DOM，所以它不会像iframe那样运行，因为当一些外部DOM在本地DOM中加载（复制粘贴）时会发生很多变化（CSS，CSS规则优先级等）。

来源

2015-10-14 16:40:15

你可以删除你的jQuery，你的CSS，并尝试重复每个块的HTML;他们可以在手机尺寸上隐藏一些块。这只是一个想法。

来源

2015-10-14 16:41:22

引导传送带对齐和加载问题

回答

相关问题