0

私は Bootstrap を初めて使用し、ポートフォリオ プロジェクト用の簡単な写真カルーセルをセットアップするために使用したいと考えています。写真カルーセル内を左右に移動して、画像のキャプションを読みたいと思っています。

Bootstrap 2.0 の Lynda チュートリアルに従い、Bootstrap の仕組みをある程度理解しましたが、まだ行き詰まっています。

ポートフォリオ ページのコードでは、3 つの画像すべてが左側に表示されますが、ナビゲートできません。

Bootstrap 3.0 を使用しています。このバージョンではクラスが多少異なることは理解していますが、カルーセル クラスは同じであるという印象を受けています。

助けてくれてありがとう

これが私のコードです：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Design</title>

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/Custom.css" rel="stylesheet" type="text/css">


<script src="http://code.jquery.com/jquery-latesst.js"></script> <!- downloads latest version of jquery --!> 
<script src="js/bootstrap.min.js"></script>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>

</head>
<body>


<div class="carousel slide" id="artists">
        <div class="carousel-inner">

            <div class="item active">
                <img src="img/content writing.jpg"  class="active" alt="content writing"/>
                <div class="carousel-caption>
                    <h2>first item</h2>
                    <p> para text 1</p>
                </div>
            </div>

            <div class="item>    
                <img src="img/Headshot.jpg"  alt="headshot"/>
                <div class="carousel-caption">
                     <h4>second item</h4>
                    <p> para text 2</p>
                </div>
            </div>

            <div class="item"> 
                <img src="img/folder.gif"  alt="social media"/>
                <div class="carousel-caption">
                    <h4>third item</h4>
                    <p> para text 3</p>
                </div>
            </div>

        </div>

    <div class="carousel-control">
    </div>
</div>

<a href="#artists" class="left carousel-control" data-slide="prev">previous
<span class="icon-prev"></span></a>
<a href="#artists" class="right carousel-control" data-slide="next">next</a>
<span class="icon-next"></span></a>


</body>
</html>
4

1 に答える 1

2

いくつかの終了引用符が欠落しているようですが、これをクリーンアップしている間、ここではもう少し正確な実装を示します (ナビゲーションをクリーンアップしました) ( demo )。

<div class="carousel slide" id="artists">
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placecage.com/200/300"  class="active" alt="content writing"/>
      <div class="carousel-caption">
        <h2>first item</h2>
        <p> para text 1</p>
      </div>
    </div>
    <div class="item">    
      <img src="http://placecage.com/g/200/300"  alt="headshot"/>
      <div class="carousel-caption">
        <h4>second item</h4>
        <p> para text 2</p>
      </div>
    </div>
    <div class="item"> 
      <img src="http://placecage.com/c/200/300"  alt="social media"/>
      <div class="carousel-caption">
        <h4>third item</h4>
        <p> para text 3</p>
      </div>
    </div>
  </div>
  <a href="#artists" class="left carousel-control" data-slide="prev">
    previous
    <span class="icon-prev"></span>
  </a>
  <a href="#artists" class="right carousel-control" data-slide="next">
    next
    <span class="icon-next"></span>
  </a>
</div>
于 2013-10-02T21:10:47.283 に答える