An example: http://jsfiddle.net/jnYs7/3/
What I did was move the #navlist
inside of the .m-carousel
and added <a>
with data-slide='number_here'
attribute to the <a>
, making it a pagination. I also changed your activeStep
class name to m-active
.
Now you only need to style it.
UPDATE http://jsfiddle.net/jnYs7/10/
Change the margin-right
here to define the distance between the divs
.m-center:not(.m-fluid) > .m-carousel-inner > *:not(:first-child),
.m-center:not(.m-fluid) > .m-carousel-inner > *:not(:last-child){
position: relative;
float: left;
left:40px;
margin-left:0px;
margin-right:-30px;
}
I didn't find any reference to the starting point but you can use something like .trigger()
from jquery that will trigger the click event on a link
$('#navlist li:eq(2) a').trigger('click');
//:eq() is the index of li (in this case super)
In the updated fiddle I changed some css in overall, compare the fiddle for missing CSS.