Question

我有一个我为朋友工作的画廊网站，主页是从各个画廊获取样本图像。我设置了简单的版本，但认为旋转木马对于样本图像会很酷。我尝试放入一个与Bootstrap上演示完全相似的旋转木马，而我得到的是一组堆叠在一起的图像。我需要帮助。这是相关的代码（部分为了简洁起见）

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
  <meta name="dcterms.created" content="Thu, 21 Apr 2016 15:56:18 GMT">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <title></title>

  <!--[if IE]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <link rel="stylesheet" 
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
        crossorigin="anonymous">
  <link rel="stylesheet" href="CSS/designStyle.css"></li>

  </head>
  <body>
    <div class="container">
      <div id="clothing" class="col-xs-12">
        <div id="clothing-carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#clothing-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#clothing-carousel" data-slide-to="1"></li>
            <li data-target="#clothing-carousel" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <img src="Photos/Clothing/IMG_0785.jpg" 
                   alt="First slide" data-holder-rendered="true" />
            </div>
            <div class="carousel-item">
              <img src="Photos/Clothing/IMG_0786.jpg"
                   alt="Second slide" data-holder-rendered="true" />
            </div>
            <div class="carousel-item">
              <img src="Photos/Clothing/IMG_1276.jpg"
                   alt="Third slide" data-holder-rendered="true" />
            </div>
          </div>
          <a class="left carousel-control" href="#clothing-carousel"
             role="button" data-slide="prev">
            <span class="icon-prev" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#clothing-carousel"
             role="button" data-slide="next">
            <span class="icon-next" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script 
       src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
       integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
       crossorigin="anonymous"></script>
  </body>
</html>

非常感谢任何帮助。

Answer 1

为什么要保留data-holder-rendered="true"？删除下面的行。

<div id="clothing-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#clothing-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#clothing-carousel" data-slide-to="1"></li>
    <li data-target="#clothing-carousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="Photos/Clothing/IMG_0785.jpg" alt="First slide" data-holder-rendered="true" />
    </div>
    <div class="carousel-item">
      <img src="Photos/Clothing/IMG_0786.jpg" alt="Second slide" data-holder-rendered="true" />
    </div>
    <div class="carousel-item">
      <img src="Photos/Clothing/IMG_1276.jpg" alt="Third slide" data-holder-rendered="true" />
    </div>
  </div>
  <a class="left carousel-control" href="#clothing-carousel" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#clothing-carousel" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

改为使用这些行。

<div id="clothing-carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#clothing-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#clothing-carousel" data-slide-to="1"></li>
    <li data-target="#clothing-carousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="Photos/Clothing/IMG_0785.jpg" alt="...">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="Photos/Clothing/IMG_0786.jpg" alt="...">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="Photos/Clothing/IMG_1276.jpg" alt="...">
      <div class="carousel-caption">
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#clothing-carousel" 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="#clothing-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Bootstrap Carousel留下堆栈的图像

1 个答案: