I am new to Bootstrap and I want to use it to set up a simple photo carousel for a portfolio project. I want to be able to navigate left and right in the photo carousel and read captions for my images.
I followed the Lynda tutorial for Bootstrap 2.0 and have some understanding of how Bootstrap works, but I am still stuck.
My code for my portfolio pages display all three images to the left hand side, but it doesn't allow me to navigate.
I am using Bootstrap 3.0. I understand the classes are somewhat different in this version but I am under the impression that the carousel class is the same.
Thanks for the help
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Design</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/Custom.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latesst.js"></script> <!- downloads latest version of jquery --!>
<script src="js/bootstrap.min.js"></script>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
</head>
<body>
<div class="carousel slide" id="artists">
<div class="carousel-inner">
<div class="item active">
<img src="img/content writing.jpg" class="active" alt="content writing"/>
<div class="carousel-caption>
<h2>first item</h2>
<p> para text 1</p>
</div>
</div>
<div class="item>
<img src="img/Headshot.jpg" alt="headshot"/>
<div class="carousel-caption">
<h4>second item</h4>
<p> para text 2</p>
</div>
</div>
<div class="item">
<img src="img/folder.gif" alt="social media"/>
<div class="carousel-caption">
<h4>third item</h4>
<p> para text 3</p>
</div>
</div>
</div>
<div class="carousel-control">
</div>
</div>
<a href="#artists" class="left carousel-control" data-slide="prev">previous
<span class="icon-prev"></span></a>
<a href="#artists" class="right carousel-control" data-slide="next">next</a>
<span class="icon-next"></span></a>
</body>
</html>