Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

Carousel not automatically sliding in bootstrap 3, and the buttons do not function

on

I was hoping that you guys would be able to help me find out what is wrong with my code, as I have been trying to find the source of the problem, but couldn't.

The problem consists of the selectors, arrow-buttons, and the automatic slide, all do not seem to be working when I try out my code :/

I am using Bootstrap 3, Dreamweaver, and Google Chrome for trying out the code, this is my code as it lies right now:

<!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>
    <title>Project</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
    <link href = "../Bootstrap/css/bootstrap.min.css" rel = "stylesheet">
    <link href = "../Bootstrap/css/styles.css" rel = "stylesheet">
    <script src  ="js/jquery-1.7.1.min.js"></script>
    <script src = "js/bootstrap.js"></script>
</head>
<body>
    <div id = "carousel" class = "carousel slide" data-ride = "carousel">
        <ol class = "carousel-indicators">
            <li data-target = "#carousel" data-slide-to = "0" class = "active"></li>
            <li data-target = "#carousel" data-slide-to = "1"></li>
            <li data-target = "#carousel" data-slide-to = "2"></li>
        </ol>
        <div class = "carousel-inner">
                <div class = "item active">
                <img src="../Pictures/pic1.jpg" alt = "pic1" class = "img-responsive">
                    <div class = "carousel-caption">
                    <h3>pic1</h3>
                    <p>Lorem ipsum dolor sit amet</p>
                </div>
            </div>
                <div class = "item">
                <img src = "../Pictures/pic2.jpg" alt = "pic2" class = "img-responsive">
                    <div class = "carousel-caption">
                    <h3>pic2</h3>
                    <p>Lorem ipsum dolor sit amet</p>
                </div>
                </div>
            <div class = "item">
                <img src = "../Pictures/pic3.jpg" alt = "pic3" class = "img-responsive">
                    <div class = "carousel-caption">
                    <h3>pic3</h3>
                    <p>Lorem ipsum dolor sit amet</p>
                </div>
            </div>
        </div>
        <a class = "left carousel-control" href = "#carousel" data-slide = "prev">
            <span class = "icon-prev"></span>
        </a>
        <a class = "right carousel-control" href = "#carousel" data-slide = "next">
            <span class = "icon-next"></span>
        </a>
    </div>
    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src = "../Bootstrap/js"></script>
</body>
</html>

Comments

Post a Comment