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 Monday, August 01, 2016 9:09 AM

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 email address so that we may contact you if necessary. We will also use this for your Gravatar.
Enter the URL to your website. URLs may be removed from comments.
Enter your comment here.
If you can't type Human in, you can't post, plain and simple.
Submit Comment Cancel

Chris Hammond is

Chris Hammond is a father, husband, leader, developer and car guy. Chris has long specialized in ASP.NET and DotNetNuke development, so you will find a variety of topics here on the website. For more information check out the about me page.

If you are looking for DotNetNuke consulting please visit my business website at http://www.christoc.com/

Disclaimer

Any blog posts here are solely the opinion and views of Chris Hammond only. Comments on blog posts are the opinion of the commenter, and not Chris Hammond.

Powered By

This website is managed by Christoc.com Software Solutions

DotNetNuke Hosting

Hosting for this website is provided by AppliedI.Net. Be sure to visit them for all your DotNetNuke Hosting needs. 

Find Me