Using the Bootstrap Carousel in the DNN HammerFlex skin

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 https://getbootstrap.com/javascript/#carousel 

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

Recent Comments

Comment Avatar

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 DNNRocks in, you can't post, plain and simple.
Submit Comment Cancel

Chris Hammond

Chris Hammond is a father, husband, leader, software developer, photographer and car guy. Chris focuses on the latest in technology including artificial intelligence (AI) and has spent decades becoming an expert in ASP.NET and DotNetNuke (DNN) development. You will find a variety of posts relating to those topics here on the website. For more information check out the about Chris Hammond page.

Find me on Twitter, GitHub and LinkedIn.