When building up a simple template for Bootstrap’s carousel, the “>” symbols are missing. You can easily spot them in the documentation. Do I have to provide them somewhere? If yes, how and where?
Here’s the code:
<!DOCTYPE html>
<html lang='de'>
<head>
<meta charset='utf-8' />
<title>XX</title>
<meta content='' name='keywords' />
<meta content='' name='description'>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</meta>
<link href='css/bootstrap.min.css' rel='stylesheet' />
<!-- Le fav and touch icons -->
<link href='img/favicon.ico' rel='shortcut icon' />
<link href='css/bootstrap.min.css' media='screen' rel='stylesheet' />
</head>
<body>
<div class='container'>
<div class='carousel slide' id='myCarousel'>
<div class='carousel-inner'>
<div class='active item'>
<a href='#'>
<img src='img/slide-01.jpg' />
</a>
<div class='carousel-caption'>
<p class='lead'>
XX
</p>
<a class='btn btn-large btn-primary' href='#'>
XX
</a>
</div>
</div>
<div class='item'>
<a href='#'>
<img src='img/slide-02.jpg' />
</a>
<div class='carousel-caption'>
<p class='lead'>
XX
</p>
<a class='btn btn-large btn-primary' href='#'>
XX
</a>
</div>
</div>
</div>
<a class='carousel-control left' data-slide='prev' href='#myCarousel'></a>
<a class='carousel-control right' data-slide='next' href='#myCarousel'></a>
</div>
</div>
</body>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src='js/bootstrap.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
!function ($) {
$(function(){
var $window = $(window)
$('#myCarousel').carousel('')
})
}(window.jQuery)
//]]>
</script>
</html>
Here’s a working carousel to get you started: http://jsfiddle.net/panchroma/VuSqQ/
Note that the slide controls are specifying the character for the arrowheads
Good luck!