更改bootstrap轮播之外的内容

Question

我正在创建一个使用引导程序轮播显示一系列产品图像的网页。在旋转木马下面有每种产品的描述。 （Se图片）

在没有将整个内容包裹在“carousel-inner”包装内的情况下，更改内容部分，淡入淡出和出来的最简洁方法是什么？

代码示例：

<div id="product-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#product-carousel" data-slide-to="0" class="active"></li>
    <!-- X number of items-->
    <li data-target="#product-carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <section id = "section-intro-image" style = "background-image: url(url-to-image);">
            <h1>Product name</h1>
        </section>
    </div>
    <!-- X number of items-->
    <div class="item">
        <section id = "section-intro-image" style = "background-image: url(url-to-image);">
            <h1>Product name</h1>
        </section>
    </div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#product-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="#product-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>
<!-- X number of content divs-->
<div class="content">
    <!--Change this contentdiv when the carousel changes-->
<h1>Product name</h1>
<p>
        Some content
    </p>
</div>  

Answer 1

使用jQuery append()或html()函数将新内容附加到元素。

e.g：

$('#section-intro-image').empty().append('<p>Whatever you like...</p>');