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)
  5. <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>
  6. 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/

Recent Comments

Can I set the time delay inbetween slides for the carousel by setting a theme setting, or do I need to edit a file somewhere to do this?

Posted By: David Perry on Aug 2016

Add Comment

Please add your comment by filling out the field(s) below. Your comment may need to be approved before it becomes visible.
Enter your first name for display with the comment
Enter your last name for display with the comment.
Enter your comment here.
If you can't type Human2 in, you can't post, plain and simple.
Submit Comment Cancel

Chris Hammond

Chris Hammond

is a father, husband, leader, developer, photographer and car guy. Chris has long specialized in ASP.NET and DotNetNuke (DNN) development, so you will find a variety of posts relating to those topics. For more information check out the about Chris Hammond page.

If you are looking for DotNetNuke consulting please visit Christoc.com Software Solutions

Find me on Twitter, GitHub and LinkedIn.