It's my first time using Bootstrap Carousel, I did exactly what the documentation says, I have all four slides showing on top of each other. Any hints?
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I also included this JS function:
$(function(){
$('.carousel').carousel()
});
This is the header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--- Font Awsome -->
<script src=".js"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- my CSS -->
<link rel="stylesheet" href="css/styles.css">
At the bottom of the I have the following:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src=".1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
<script src=".1.1/jquery.min.js"></script>
<!-- Latest piled and minified JavaScript -->
<script src=".3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/script.js"></script>
It's my first time using Bootstrap Carousel, I did exactly what the documentation says, I have all four slides showing on top of each other. Any hints?
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I also included this JS function:
$(function(){
$('.carousel').carousel()
});
This is the header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--- Font Awsome -->
<script src="https://use.fontawesome./4c7009c904.js"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- my CSS -->
<link rel="stylesheet" href="css/styles.css">
At the bottom of the I have the following:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery./jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/script.js"></script>
- Would you show the header of your file? Should have the references. – Ivan Santiago Commented Nov 29, 2016 at 21:11
- When are you calling that function? Do the elements already exist at that time? – C3roe Commented Nov 29, 2016 at 21:20
- Check that you are loading bootstrap, you have missing classes I think. – Mauro Alvarez Commented Nov 29, 2016 at 21:22
- I think you're right, they provided the function but I really don't know how to call it at this point! the documentation didn't say anything about it. – Khaled Alsibai Commented Nov 29, 2016 at 21:22
- What errors are you getting in the browser's console? – j08691 Commented Nov 29, 2016 at 21:23
1 Answer
Reset to default 5You have wrong classes setted in the div it's not div class="carousel-item" it's just div class="item"
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've tried that in fiddle and it's working.
Regards
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745207331a4616654.html
评论列表（0条）