Using the Bootstrap Carousel in the DNN HammerFlex skin

A month or so ago I released a new open source skin for DotNetNuke (DNN), called HammerFlex. One of the cool things about the HammerFlex skin is the implementation of Bootstrap, and specifically the Carousel feature that allows you to add a carousel/slider to your site.

The skin is designed to use the carousel at the top of a page, I haven’t tried it elsewhere, though it might be possible to use in other Panes in the DNN Skin.

In order to put a slider into a page using the HammerFlex skin perform the following steps:

1. Add an HTML module to the CarouselPane on the page.
2. Edit the HTML module.
3. Switch to the HTML view
4. Paste the following code into the HTML view (this will include 7 slides, you can add/remove as necessary)

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

<ol class="carousel-indicators">

    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></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>

    <li data-target="#carousel-example-generic" data-slide-to="4"></li>

    <li data-target="#carousel-example-generic" data-slide-to="5"></li>

    <li data-target="#carousel-example-generic" data-slide-to="6"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner">

<div class="item active">

<img src="/portals/0/slides/slide1.jpg" alt="Forest Park Balloon Glow" />

<div class="carousel-caption">

<h1>Forest Park Balloon Glow</h1>

<p>September 2013</p>

</div>

</div>

<div class="item">

<img src="/portals/0/slides/slide2.jpg" alt="USS Inaugural Mine Sweeper" />

<div class="carousel-caption">

<h1>USS Inaugural Mine Sweeper</h1>

<p>January 2013</p>

</div>

</div>

<div class="item">

<img src="/portals/0/slides/slide3.jpg" alt="Howell Island State Park" />

<div class="carousel-caption">

<h1>Howell Island State Park</h1>

<p>February 2013</p>

</div>

</div>

<div class="item">

<img src="/portals/0/slides/slide4.jpg" alt="The Kids" />

<div class="carousel-caption">

<h1>The Kids</h1>

<p>December 2013</p>

</div>

</div>

<div class="item">

<img src="/portals/0/slides/slide5.jpg" alt="Busch Stadium, World Series" />

<div class="carousel-caption">

<h1>Busch Stadium, World Series</h1>

<p>October 2013</p>

</div>

</div>

<div class="item">

<img src="/portals/0/slides/slide6.jpg" alt="World Series Game 4" />

<div class="carousel-caption">

<h1>World Series Game 4</h1>

<p>October 2013</p>

</div>

</div>

<div class="item">

<img src="/portals/0/slides/slide7.jpg" alt="Christmas Family Photo" />

<div class="carousel-caption">

<h1>Christmas Family Photo</h1>

<p>December 2013</p>

</div>

</div>

</div>

<!-- Controls -->

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

5. Customize the text and image paths for your own content.

For more information on the Bootstrap Carousel check out http://getbootstrap.com/javascript/#carousel 

See it in action at http://www.chrishammond.com or http://www.jacquelinehammond.com/