My code is below. In brief, I'm wondering if it's possible to have a div
BELOW the caption that contains text and links that shuffles with the
images. The problem seems to be that the "active item" div only extends
down to the caption and image, so any additional content gets overlaid.
I would like to have the "description" div be below the caption and image,
but still change with carousel, but can't figure out how to structure it so
that this works. What about making another entire carousel below it, with
no buttons, that responds to the clicks on the carousel buttons above?
<div id="photo-carousel" class="columns">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img class = "carousel_img offset1" src="images/nao_big.jpg"
alt="" height=75% width=75%>
<div class="carousel-caption">
<h4>Social Robotics and Intelligent Cognitive Tutoring</h4>
<p>Building a model of a student's internal state from
indirect observation</p>
</div>
<div id="description">
<p> THIS IS A DEscription of the project. It goes on for a few sentences.
Then I mention one more thing
then its over
</p>
<a href src="www.xkcd.com"> this is a link to xkcd> </a>
</div>
</div>
<div class="item">
<img class = "carousel_img offset1" src="images/nao_big.jpg"
alt="" height=75% width=75%>
<div class="carousel-caption">
<h4>Robot Trust and Irrational Decision Making</h4>
<p>How do social behaviors influence a participant's
willingness to take bad advice?</p>
</div>
</div>
<div class="item">
<img class = "carousel_img offset1" src="images/nao_big.jpg"
alt="" height=75% width=75%>
<div class="carousel-caption">
<h4>Sentiment Analysis and Social Robotics</h4>
<p>Leveraging semantic content in a conversation to create
appropriate social behavior</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel"
data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel"
data-slide="next">›</a>
</div>
</div>
