Is there a way to populate my bootstrap carousel with the content of an HTML page instead of images? I attempted to create a div and use CSS to load the contents from ac1_div using
content:url(carousel_content.html)<!-- our global achievers carousel -->
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" id="ac1_div">
</div>
<div class="item">
<img src="../images/banner_carousel_b.jpg" alt="...">
</div>
<div class="item">
<img src="../images/banner_carousel_c.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic2" 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="#carousel-example-generic2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
/*my css code*/
#ac1_div
{
content: url("../pages/achievers/ac1.html");
}
<!--ac1.html-->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>achiever</h1>
</body>
</html>