javascript - Bootstrap carousel is showing all slides at once

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>

Share Improve this question edited Nov 29, 2016 at 21:20 asked Nov 29, 2016 at 21:03 Khaled Alsibai 111 silver badge3 bronze badges

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

| Show 5 more ments

1 Answer 1

Sorted by: Reset to default 5

You 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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap carousel is showing all slides at once - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)