Question

我希望能够有一个旋转木马，div的内部以婴儿推车为中心。

以下是图像：

这是我目前拥有的：

我希望将这两个框放在箭头的中心：

我希望箭头在三个框之间滑动：右箭头：从2-> 3-> 1等。

代码如下：

$('#carousel-example-generic').carousel({
  wrap: true,
  interval: false
});

.carousel.slide img {
  width: 100%;
  height: auto;
}

.carousel img {
  border-radius: 0px;
}

.carousel-control.left,
.carousel-control.right {
  background: none;
  color: @red;
  border: none;
}

.carousel-control.left {
  margin-left: -45px;
  color: black;
}

.carousel-control.right {
  margin-right: -45px;
  color: black;
}


/* DIV BOXES */

.bottomFarLeftBox {
  height: 170px;
  width: 290px;
  background-color: #4B92DB;
  float: left;
  clear: none;
}

.bottomMidLeftBox {
  height: 170px;
  width: 290px;
  margin-right: 60px;
  background-color: #4B92DB;
  float: right;
  clear: none;
}

.bottomRightBox {
  height: 170px;
  width: 310px;
}

.row img {
  padding-bottom: 5px;
}

#topLeftColumn {
  padding-right: 30px;
}

#bottomLeftColumn {
  padding-left: 0px;
}

#bottomRightColumn {
  padding-right: 0px;
}

#bottomContactsRow {
  display: inline-flex;
}

<div class="col-sm-8">
  <h4>Latest Training Documentation</h4>
  <hr style="margin-top: 10px;" />

  <div id="carousel-example-generic" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" class="active"></li>
      <!-- data-slide-to="0" -->

      <!-- UPDATE ON 3+ SLIDES -->
      <!-- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li> -->
    </ol>

    <div class="carousel-inner">
      <!-- Slide -->
      <div class="item active">
        <div class="row">
          <div class="col-md-6">
            <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
              <div class="bottomFarLeftBox">
                <h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 60px!important; padding-bottom: 5px; padding-right: 6px; vertical-align: middle;" />OneDrive</h2>
                <p id="innerBoxText">Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
              </div>
            </a>
          </div>
          <div class="col-md-6">
            <a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
              <div class="bottomMidLeftBox">
                <h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/delveLogo.png" style="height: 50px!important; width: 50px!important; padding-bottom: 5px; padding-right: 8px; vertical-align: middle;" />Delve</h2>
                <p id="innerBoxText">It&#39;s more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
              </div>
            </a>
          </div>
        </div>
      </div>
      <!-- Slide -->
      <div class="item">
        <div class="row">
          <div class="col-md-6">
            <!-- ADD TRAINING MATERIALS IN HERE -->
          </div>
          <div class="col-md-6">
            <!-- ADD TRAINING MATERIALS IN HERE -->
          </div>
        </div>
      </div>
      <!-- Slide -->
      <div class="item">
        <div class="row">
          <div class="col-md-6">
            <!-- ADD TRAINING MATERIALS IN HERE -->
          </div>
          <div class="col-md-6">
            <!-- ADD TRAINING MATERIALS IN HERE -->
          </div>
        </div>
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
</div>

Answer 1

现在就拥有

 <!doctype html>
 <html>
 <head>
 <title></title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <style>
 .carousel.slide img {
 width:100%;
 height:auto;
 }
 .carousel img {
 border-radius: 0px;
 }
 .carousel-control.left, .carousel-control.right {
 background: none;
 color: @red;
 border: none;
 }
 .carousel-control.left {color: black;}
 .carousel-control.right {color: black;}

 /* DIV BOXES */
 .bottomFarLeftBox {
 height: 170px;
 width: 95%;
 margin-left: 5%;
 background-color: #4B92DB;
 float: left;
 clear: none;
 }
 .bottomMidLeftBox {
 height: 170px;
 width: 95%;
 margin-right: 5%;
 background-color: #4B92DB;
 float: right;
 clear: none;
 }

 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img{
 width: 70%;
 height: 200px;
 margin: auto;
 }
 </style>

 </head>

 <body>

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active">

 <div class="row">
 <div class="col-sm-1"></div>
  <div class="col-sm-5">
    <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
      <div class="bottomFarLeftBox">
        <img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
        <div class="carousel-caption">
        <p>Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
        </div>
      </div>
    </a>
  </div>
  <div class="col-sm-5">
    <a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
      <div class="bottomMidLeftBox">
        <img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
        <div class="carousel-caption">
        <p>It&#39;s more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
        </div>
      </div>
    </a>
  </div>
  <div class="col-sm-1"></div>
  </div>
  </div>

 <div class="item">
 <div class="row">
 <div class="col-sm-1"></div>
  <div class="col-sm-5">
    <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
      <div class="bottomFarLeftBox">
        <img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
        <div class="carousel-caption">
        <p>I am second</p>
        </div>
      </div>
    </a>
  </div>
  <div class="col-sm-5">
    <a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
      <div class="bottomMidLeftBox">
        <img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
        <div class="carousel-caption">
        <p>I am second of second</p>
        </div>
      </div>
    </a>
  </div>
  <div class="col-sm-1"></div>
 </div>
 </div>

 <div class="item">
 <div class="row">
 <div class="col-sm-1"></div>
  <div class="col-sm-5">
    <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
      <div class="bottomFarLeftBox">
        <img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
        <div class="carousel-caption">
        <p>I am the third</p>
        </div>
      </div>
    </a>
  </div>
  <div class="col-sm-5">
    <a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
      <div class="bottomMidLeftBox">
        <img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
        <div class="carousel-caption">
        <p>I am the third of third</p>
        </div>
      </div>
    </a>
  </div>
  <div class="col-sm-1"></div>
 </div>
 </div>

 <!-- Left and right 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>  

 </body>
 </html>

带3个以上盒子的中心引导轮播

1 个答案: