Terra Blueprint for DNN7

Include that awesome slideshow you always needed in your website. Easier and more flexible than ever!

Carousel responsive

Example

First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

View code

<div id="MyCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#MyCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#MyCarousel" data-slide-to="1" class=""></li>
      <li data-target="#MyCarousel" data-slide-to="2" class=""></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="images/slider-1.jpg" alt="">
        <div class="carousel-caption">
        	<h3>First slide label</h3>
        	<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="item">
        <img src="images/slider-2.jpg" alt="">
        <div class="carousel-caption">
        	<h3>Second slide label</h3>
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="item">
        <img src="images/slider-3.jpg" alt="">
        <div class="carousel-caption">
        	<h3>Third slide label</h3>
        	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
        
    <!-- Controls -->
    <a class="left carousel-control" href="#MyCarousel" data-slide="prev"></a>
    <a class="right carousel-control" href="#MyCarousel" data-slide="next"></a>
</div>

Other settings

Optionally you can have more control over the carousel. If necessary, edit the theme's layout files and change the call to the carousel script on the bottom of the file, as in the following example:

$('.carousel').carousel({
	interval: 5000, // Delay between slides. If false, carousel will not automatically cycle. 
	pause: 'hover' // Pauses the cycling of the carousel on mouse over.
});

CMS-specific instructions

If you need further details on how to add a slider to your specific CMS, please visit our Knowledge Base for detailed articles.

Transition animations not supported in Internet Explorer 8 & 9

Carousel exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.

Accessibility issue

The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.

Nivo Slider responsive

Example

This is a sample title

This is an example of a HTML caption with a link.

Learn how to configure the Nivo Slider

Sliders