I have a carousel on my home page that is automatically setup to display content within a div that looks like this:

<div class="inner">
						<div class="item">
							<h2>Advocate editorial: “Understanding the World”</h2>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">Learn more</a></p>
						</div>
						
						<div class="item">
							<h2>Quisque scelerisque lectus non diam sollicitudin nec</h2>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">Learn more </a></p>
						</div>
						
						<div class="item">
							<h2>Class aptent taciti sociosqu ad litora torquent per conubia nostr</h2>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">Learn more </a></p>
						</div>
						
						<div class="item">
							<h2>Morbi sed libero felis. Nullam iaculis tincidunt imperdiet.</h2>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">Learn more </a></p>
						</div>
					</div>

Each div with the class "item" is a carousel item. I would love to inject content into the page using a document list instead of manually adding this HTML in a Static HTML Web Part. Each H2 and <p> tag will be a field in a document under the page that is displaying the carousel. I already have the carousel itself setup to display whatever is shown in between the "inner" div class...but I am trying to figure out how to do this with web parts. Is this possible?