Salut !
j'a un petit problème avec mon carousel boostrap, je n'arrive pas à l'activer, cela reste toujours figé sur ma première image
... une idée de ce que cela pourrait être svp ?
J'ai utilisé le caroussel de boostrap de base.
voici mon code html et css :
j'a un petit problème avec mon carousel boostrap, je n'arrive pas à l'activer, cela reste toujours figé sur ma première image
... une idée de ce que cela pourrait être svp ? J'ai utilisé le caroussel de boostrap de base.
voici mon code html et css :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device=width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.css">
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Playfair+Display:400,700,900|Roboto:300,400,400i,700,900" rel="stylesheet">
</head>
<body>
<!-- NAV -->
<div class="header-area">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/tajamlogotype.png" alt="logo" class="img-responsive"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Expertise</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">People say</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- SLIDER -->
<div class="slider-area">
<div class="container">
<div id="fawesome-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="slider-text">
<h2>We Are Awesome Creative Agency</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
<a href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="slider-text">
<h2>We Are Awesome Creative Agency</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
<a href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="slider-text">
<h2>We Are Awesome Creative Agency</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
<a href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators ">
<li data-target="#fawesome-carousel" data-slide-to="0" class="active"></li>
<li data-target="#fawesome-carousel" data-slide-to="1"></li>
<li data-target="#fawesome-carousel" data-slide-to="2"></li>
<li data-target="#fawesome-carousel" data-slide-to="3"></li>
</ol>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</body>
</html>/*
font-family: 'Playfair Display', serif;
font-family: 'Roboto', sans-serif;
font-family: 'Fjalla One', sans-serif;
*/
.slider-text h2 {
font-family: 'Playfair Display', serif;
font-weight: 800;
}
.carousel-indicators {
background-color: red;
top: 560px;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.header-area {
background-image: url(../img/background.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.header-area, .header-area .slider-area, .header-area .slider-area .carousel slide, .header-area .slider-area .carousel-inner, .header-area .slider-area .carousel-inner, .header-area .slider-area .item {
height: 100%;
margin-bottom: 170px;
}