Bootstrapping a carousel onto my homepage

I've been very (very) aware that the homepage of my site is very text heavy, consisting of a list of the most recent blog posts from techy me and cooking me. Over the past couple of weeks I've poked at some of the available modules for Orchard that purport to allow me to stick a great big image carousel at the top of the page, unfortunately I've not been able to get any of them to work. I suspect that this is due to a combination of some of the breaking changes in Orchard 1.10.x and the fact that most of the modules are very old. I finally decided to bite the bullet today and roll my own solution.

As the theme that I use is based on Bootstrap, my line of investigation immediately went to the Bootstrap Carousel component. To be honest, getting something that looked good up and running couldn't have been easier! I added some markup, which is basically the example code provided customised to my needs, to the Content section of my home page and, as if by magic, my site looked a little better!

The markup for my carousel, as of this moment, is:

<div class="carousel slide" id="carousel-example-generic" data-ride="carousel"><!-- Indicators -->
  <ol class="carousel-indicators">
    <li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img alt="My 'Hit Refresh' Moment" src="/Media/Default/CarouselImages/hit_refresh_top_hat.jpg" />
      <div class="carousel-caption">
        <h3><a href="/blog/my-hit-refresh-moment">My 'Hit Refresh' Moment</a></h3>
        <div>Life's too short to not make or find your own opportunities</div>
      </div>
    </div>
    <div class="item">
      <img alt="Chorizo, Chilli, Tomato & Orzo soup" src="/Media/Default/CarouselImages/chorizo_chilli_tomato_and_orzo_soup.jpg" />
      <div class="carousel-caption">
        <h3><a href="/recipes/chorizo-chilli-tomato-orzo-soup">Chorizo, Chilli, Tomato & Orzo soup</a></h3>
        <div>A quick soup rustled up using the last of my home grown tomatoes and chillis</div>
      </div>
    </div>
    <div class="item">
      <img alt="Replacing our home WiFi with Ubiquiti UniFi" src="/Media/Default/CarouselImages/ubiquiti_unifi_topology_map.png" />
      <div class="carousel-caption">
        <h3><a href="/blog/replacing-our-home-wifi-with-ubiquiti-unifi">Replacing our home WiFi with Ubiquiti UniFi</a></h3>
        <div>If there's one thing you should do for your home network, this is it!</div>
      </div>
    </div>
    <!-- Start Item -->
    <div class="item">
      <img alt="Who you know, versus what you know" src="/Media/Default/CarouselImages/wine_and_biscuits.jpg" />
      <div class="carousel-caption">
        <h3><a href="/blog/who-you-know-versus-what-you-know">Who you know, versus what you know</a></h3>
        <div>The people you build relationships with, personally and profesionally, are just as important as your skills and knowledge</div>
      </div>
    </div>
    <!-- End Item -->
  </div>
  <!-- Controls --> 
  <a class="left carousel-control" role="button" href="#carousel-example-generic" 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" role="button" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span>
  </a>
</div>

The "Start Item" and "End Item" comments are in there to remind me which block of markup to copy & paste when I want to add an additional slide to the carousel (anything that makes getting it right easier has gotta be good, right?), all the rest is basically copied & pasted in and then tweaked to fit. When I say "tweaked", I mean pretty much left as-is because it works out of the box!

The next exercise for me is to turn this into an Orchard 1.10.x compatible module, get it up onto GitHub and then get it published to the Orchard gallery to make life easier for other people that are using Orchard. With a bit of luck that won't take too long!