I have a "Hero" unit, which has the code as follows:

```
<div class="hero-unit">
    <div class="container">
        <h1>Dapibus Euismod Mollis</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
    </div>
</div>

```

What I am trying to do is have four or five different `<h1>`'s and `<p>`'s and then have each one fade through to the next one after five seconds, looping back to the begining at the end. What I have tried so far is having something like:

```
<div class="hero-unit">
    <div class="container">
        <h1>Dapibus Euismod Mollis</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
        <h1>Dapibus Euismod Mollis</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
        <h1>Dapibus Euismod Mollis</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
    </div>
</div>

```

And then hiding and showing the content, but that is a really ugly solution that doesn't really work. Can anyone suggest anything else?