Question

我正在使用Bootstrap 3.3.6编写的网站上工作。其中一个页面有一个＆＃34; banner＆＃34;这是通过在background-image中生成.container-fluid来创建的：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12" style="background-image: url('/banner-placeholder.jpg'); height: 555px; background-repeat: no-repeat;  background-position: center;">

在.container-fluid内还有其他Bootstrap div包含表单和一些文本区域。我已经加入了缩短版的标记来表示结构：

<div class="container">

    <div class="row">
        <div class="col-md-4 col-md-push-8 hidden-sm hidden-xs">
            <h3>Heading 1</h3>
        </div>
    </div>

    <div class="row">

        <div class="col-md-4">
            <h3>Heading 2</h3>
        </div>

        <div class="col-md-4 col-md-push-4 hidden-sm hidden-xs">
            <!-- Form -->

            <div class="row">
                <h3>Heading 4</h3>
            </div>

        </div>
    </div>

</div>

我想要有一个滑动图像的旋转木马，而不只是一个静态的背景图像（background-image: url('/banner-placeholder.jpg');）。当轮播图像改变时，＆＃34;内容＆＃34;在图像上方（.container内）也需要改变。

我不明白如何以这样的方式使用Bootstrap轮播。首先，如果我必须使用background-image:标记，如何才能获得与<img src="">相同的效果？其次，我理解轮播将在.item之间切换。那么，我是否必须为我的内容添加标记＆＃34;在.item标记内的<img src="">内？

我理解旋转木马如何工作的基础知识。但我不明白如何调整我的标记以使其在旋转木马中工作。请有人给我一些指示，因为我完全迷失了它！

Answer 1

试试这个。图像会自动滑动。此处未显示轮播控件，因为未附加字体文件。

.imslide{
  width:100%;
  margin:0;
  margin-bottom:80px;
  overflow:hidden;
}
.slideim{
  width:100%;
  max-width:100%;
  display:block;
}
.carousel-inner item{
  position:relative;
}
.slide-content{
  position:absolute;
  color:white;
  top:25%;
  left:25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<section id="slider" class="carousel slide imslide forfixhead" data-ride="carousel">
  <div class="carousel-inner">
  <div class="item active">
      <div class="slide-content" id="slide_1_text">
        <h4>navigation made easy !</h4>
      </div>
	  <div class="pcimslide">
		<img src="http://www.rokkorfiles.com/photos/360px-rear.jpg" class="slideim"/>
      </div>
    </div>
    
    <div class="item">
      <div class="slide-content" id="slide_2_text">
        <h4>Distribution in 16 countries</h4>
      </div>
	    <div class="pcimslide">
		    <img src="http://www.rokkorfiles.com/photos/360PX.jpg" class="slideim"/>
      </div>
    </div>
    
  </div>

从现有标记创建Bootstrap轮播，使用全宽背景图像

1 个答案: