Question

伙伴们我在这个带标签的旋转木马上工作。现在它没有定义的高度，并使用拉伸到100％的图像来填充屏幕。我不喜欢它的工作方式。

相反，我想为每张幻灯片设置背景图片。通过这种方式，我可以为旋转木马设置一个已定义的高度，并将背景设置为覆盖，以便很好地填充div。

我在过去一两个小时内尝试了一些事情并且没有运气。

这是我的HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active">
      <img src="http://placehold.it/1200x400/cccccc/ffffff">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
      </div>
    </div><!-- End Item -->

     <div class="item">
      <img src="http://placehold.it/1200x400/999999/cccccc">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
      </div>
    </div><!-- End Item -->

    <div class="item">
      <img src="http://placehold.it/1200x400/dddddd/333333">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
      </div>
    </div><!-- End Item -->

    <div class="item">
      <img src="http://placehold.it/1200x400/999999/cccccc">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div><!-- End Item -->

  </div><!-- End Carousel Inner -->

Java

$(document).ready( function() {
$('#myCarousel').carousel({
    interval: false
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
        clickEvent = true;
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
    if(!clickEvent) {
        var count = $('#myCarousel .nav').children().length -1;
        var current = $('#myCarousel .nav li.active');
        current.removeClass('active').next().addClass('active');
        var id = parseInt(current.data('slide-to'));
        if(count == id) {
            $('#myCarousel .nav li').first().addClass('active');
        }
    }
    clickEvent = false;
});
});

和一点css

#myCarousel .nav a small {
    display:block;
}
#myCarousel .nav {
    background:#eee;
}
#myCarousel .nav a {
    border-radius:0px;
}

#myCarousel img {
    width: 100%;
}

任何帮助都将受到赞赏。干杯！

Answer 1

我对它进行了一次破解并弄清楚了

Here's a JSFIDDLE link

基本上你通过html添加背景然后因为旋转木马不包含任何图像，你需要在css中设置高度等。

<div class="item" style="background: url(http://arti.us/clients/conversant/images/driving.jpg) no-repeat left center; background-size: cover;">

将轮播内容从图像更改为背景图像

1 个答案: