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

Question

小伙子们 我正在研究这个选项卡式轮播。现在它没有定义高度，并使用拉伸到 100% 的图像来填充屏幕。我不喜欢它的工作方式。

相反，我想为每张幻灯片设置一个背景图片。这样，我可以为轮播设置定义的高度，并将背景设置为覆盖，以便很好地填充 div。

过去一两个小时我尝试了一些事情，但运气为零。

Check out the JSFiddle

这是我的 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;">