<div id="pxs_container" class="pxs_container">
            <div class="pxs_bg">
                <div class="pxs_bg1"></div>
                <div class="pxs_bg2"></div>
                <div class="pxs_bg3"></div>
            </div>
            <div class="pxs_loading">Loading images...</div>
            <div class="pxs_slider_wrapper">
                <ul class="pxs_slider">
                    <li><img src="http://localhost/dnn62/portals/0/parallex/1.png" alt="First Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/2.png" alt="Second Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/3.png" alt="Third Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/4.png" alt="Forth Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/5.png" alt="Fifth Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/6.png" alt="Sixth Image" /></li>
                </ul>
                <div class="pxs_navigation">
                    <span class="pxs_next"></span>
                    <span class="pxs_prev"></span>
                </div>
                <ul class="pxs_thumbnails">
                    <li><img src="http://localhost/dnn62/portals/0/parallex/dot.png" alt="First Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/dot.png" alt="Second Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/dot.png" alt="Third Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/dot.png" alt="Forth Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/dot.png" alt="Fifth Image" /></li>
                    <li><img src="http://localhost/dnn62/portals/0/parallex/dot.png" alt="Sixth Image" /></li>
                </ul>
            </div>
        </div>

Carousel bootstrap-carousel.js

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

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.

Third 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.

‹ ›

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Heads up! When implementing this carousel, remove the images we have provided and replace them with your own.

---

Usage

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to it's current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which jump's the slide position to a particular index beginning with 0.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-, as in data-interval="".

Name	type	default	description
interval	number	5000	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string	"hover"	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Event	Description
slide	This event fires immediately when the slide instance method is invoked.
slid	This event is fired when the carousel has completed its slide transition.