From what I understand (being a web programming newbie), once you set up carousel with bootstrap, the slide animation should already come working. However this is not the case with mine. Can somebody look at my code to check why there's no animation.
Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Murray Studio</title>
<meta name="description" content="Main Page for Murray Studio">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://ift.tt/1lTlDxP">
<link href='http://ift.tt/1ArtnNP' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li><a href="#">Home</a>
</li>
<li><a href="#">Projects</a>
</li>
<li><a href="#">About</a>
</li>
</ul>
</div>
</div>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://ift.tt/1zo2Qj4">
</div>
<!-- Menu -->
<ul>
<li><a href="#">About</a>
</li>
<li><a href="#">Blog</a>
</li>
<li><a href="#">Help</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
<!--
<div class="jumbotron">
<div class="container">
<h1>Murray Studio</h1>
</div>
</div>
-->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="first slide" src="http://ift.tt/1IPZKe7" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<div class="item">
<img class="second slide" src="http://ift.tt/1DTibYm" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<div class="item">
<img class="third slide" src="http://ift.tt/1tsYOSe" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- Carousel -->
<div class="info">
<div class="info-container">
<div class="info-row">
<div class="col-lg-3 col-centered">
<div class="about">
<h3>About</h3>
</div>
</div>
<div class="col-lg-6 col-centered">
<div class="project">
<h3>Projects</h3>
</div>
</div>
<div class="col-lg-3 col-centered">
<div class="conact">
<h3>Contact</h3>
</div>
</div>
</div>
<div class="description-row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<div id="project-box">
<h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
<p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
</div>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
</div>
CSS for Carousel:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 70%;
min-height: 70%;
}
Aucun commentaire:
Enregistrer un commentaire