Issue 1:
Hi,

For a project, I have created a Wizard plugin (the breacrumber is inspired from http://jsfiddle.net/weswinham/ySfN6/).

If you want, you can integrate it.

Cheers

CSS:

@CHARSET "UTF-8";

.wizard {
background-color: white;
}

.wizard-header a {
padding: 10px 12px 10px;
margin-right: 5px;
background: #efefef;
position: relative;
display: inline-block;
}

.wizard-header a:before {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: "";
top: 0;
left: 0;
}

.wizard-header a:after {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
position: absolute;
content: "";
top: 0;
right: -20px;
z-index: 2;
}

.wizard-header a:first-child:before,
.wizard-header a:last-child:after {
border: none;
}

.wizard-header a:first-child {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}

.wizard-header a:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}

.wizard-header .badge {
margin: 0 5px 0 18px;
position: relative;
top: -1px;
}

.wizard-header a:first-child .badge {
margin-left: 0;
}

.wizard-header .active {
background: #007ACC;
color: #fff;
}

.wizard-header .active:after {
border-left-color: #007ACC;
}

JS:

/**
* Wizard plugin for Boostrap
* Require the carousel plugin
*
* An example of HTML to use it:
*
<div id="wizard" data-role="wizard">
<div class="active" data-title="step 1">
Your content
</div>

<div data-title="step 2">
Your content
</div>
</div>

*
* Another one:
*
<div id="wizard" data-role="wizard">
<div class="active" data-title="step 1">
Your content
</div>

<div data-title="step 2">
Your content
</div>
</div>

*
* And an example of JavaScript:

$("#wizard").wizard({
validNextStep: function(index) {
return true;
},
changeStep: function(index) {
alert("Step " + (index + 1))
},
finish: function(event) {
event.preventDefault();
alert("Finished !")
}
});

*/

!function($) {
"use strict";

/* WIZARD PUBLIC CLASS DEFINITION
* ============================== */

var Wizard = function(element, options) {
var self = this;

// Base
this.$element = $(element);
this.options = $.extend({}, $.fn.wizard.defaults, options);
this.idx = 0;
this.maxIdx = 0;

// Get some informations
this.$items = $("> div[data-title]", this.$element);
this.maxIdx = this.$items.length - 1;

// Initialization
this.$element.find("> *").wrapAll("<div class='carousel slide' data-interval='false'></div>");
this.$element.addClass("wizard thumbnail");
this.$base = this.$element.find("> div.carousel");
this.$base.carousel({ interval: false });

if(this.$element.attr("id")){
this.$base.attr("id", "wizard-" + this.$element.attr("id"));

} else {
this.$base.attr("id", "wizard-" + new Date().getTime() + "-" + window.parseInt((Math.random() * 1000)));
}

// Wizard header
this.$wizardHeader = $("<div class='wizard-header'></div>");
this.$items.each(function(index, item){
var $item = $(item), active = index == 0;

$item.addClass("item");
active && $item.addClass("active");

self.$wizardHeader.append("<a href='#'" + (active ? " class='active'" : "") + " data-index='" + index + "'><span class='badge" + (active ? "" : " badge-inverse") + "'>" + (index + 1) + "</span> " + $item.data("title") + "</a>");
});

this.$base.before(this.$wizardHeader);
this.$base.before("<br />");

// Wizard core
this.$items.wrapAll("<div class='carousel-inner'></div>");
this.$base.append("<br />");

this.$previous = $("<a class='btn btn-inverse' data-slide='prev'><i class='icon-chevron-left icon-white'></i> " + this.options.previousText + "</a>");
this.$previous.attr("href", "#" + this.$base.attr("id"));
this.$previous.css("visibility", "hidden");
this.$base.append(this.$previous);

this.$next = $("<a class='btn btn-inverse' data-slide='next'><i class='icon-chevron-right icon-white'></i> " + this.options.nextText + "</a>");
this.$next.attr("href", "#" + this.$base.attr("id"));
this.$base.append(this.$next);

this.$finish = $("<button type='submit' class='btn btn-primary'>" + this.options.finishText + "</button>");
this.$finish.css("visibility", "hidden");
this.$finish.on("click", this.options.finish);
this.$base.append(this.$finish);

// Listeners
this.$wizardHeader.on("click", "> a", function(event){
event.preventDefault();
self.index($(this).data("index"));
});

this.$base.on("click", "> a", function(event){
event.preventDefault();
$(this).data("slide") == "next" ? self.next() : self.prev();
});
};

Wizard.prototype.index = function(index){
if(index != null && index >= 0 && index <= this.maxIdx){
this.$base.carousel(index);
this.idx = index;
this.update();
$.isFunction(this.options.changeStep) && this.options.changeStep(this.idx);
}

return this.idx;
};

Wizard.prototype.update = function() {
if(this.idx == 0){
this.$previous.css("visibility", "hidden");
this.$next.css("visibility", "visible");
this.$finish.css("visibility", "hidden");

} else if(this.idx == this.maxIdx){
this.$previous.css("visibility", "visible");
this.$next.css("visibility", "hidden");
this.$finish.css("visibility", "visible");

} else {
this.$previous.css("visibility", "visible");
this.$next.css("visibility", "visible");
this.$finish.css("visibility", "hidden");
}

$(".active", this.$wizardHeader).removeClass("active");
$("a:eq(" + this.idx + ")", this.$wizardHeader).addClass("active");
};

Wizard.prototype.prev = function() {
if(this.idx > 0){
this.$base.carousel("prev");
this.idx--;
this.update();
$.isFunction(this.options.changeStep) && this.options.changeStep(this.idx);
}

};

Wizard.prototype.next = function() {
if(this.idx <= this.maxIdx && this.options.validNextStep(this.idx)){
this.$base.carousel("next");
this.idx++;
this.update();
$.isFunction(this.options.changeStep) && this.options.changeStep(this.idx);
}
};

Wizard.prototype.option = function(options){
for(var i in options) {
switch(i){
case "nextText":
this.$next.text(options[i]);

case "previousText":
this.$previous.text(options[i]);

case "finishText":
this.$finish.text(options[i]);

case "finish":
this.$finish.off("click", this.options.finish);
this.$finish.on("click", options[i]);

default:
this.options[i] = options[i];
break;
}
}
};

/* WIZARD PLUGIN DEFINITION
* ======================== */

$.fn.wizard = function(opts) {
return this.each(function() {
var $this = $(this), data = $this.data("wizard"), options = typeof opts == "object" && opts;

if(data){
data.option(options)

} else {
$this.data("wizard", new $.fn.wizard.Constructor(this, options));
}

});
};

$.fn.wizard.defaults = {
nextText: "Next",
previousText: "Previous",
finishText: "Finish",
validNextStep: function(index) { return true; },
changeStep: function(index) {},
finish: function(event) {}
};

$.fn.wizard.Constructor = Wizard;

/* WIZARD DATA-API
* =============== */

$(function() {
$("body").find("div[data-role=wizard], div.wizard").wizard();
});

}(window.jQuery);

Issue 2:
It would be great if you could add a progress tracker navigation device to your supported styles / examples.

These are now pretty common place navigation items and I would think that other people would want this too.

I've subverted a 'pager' for this purpose with some custom styles. But it still doesn't feel right.

NB Some more examples

http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/