Click here to Skip to main content
15,072,933 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
Ive made a carousel that rotates in CodePen but will not rotate in VSCode. The attribute that makes it rotate is the one that says "data-ride="carousel" In other words if you take that attribute out it won't work.

I'm hoping that someone could tell me why this is not working in VS Code.

Here is the HTML
HTML
<!doctype html>
<html lang="en">
  <head>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
    <link rel="stylesheet" href="CSS/Index.css">
   
    

    <title>Ristorante Con Fusion: Home</title>

</head>

<body class="row-centered column-centered">





<div class="d-flex justify-content-center">
<div class="container d-none d-sm-block" style="margin: 60px 0 40px 0">
    <div class="row row-content">
        <div class="col">
            <div id="mycarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <img class="d-block img-fluid" src="images/uthappizza.png" alt="Uthappizza">
                        <div class="carousel-caption d-none d-sm-block">
                            <h2> Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
                            <p class="d-none d-sm-block" >A unique combination of Indian Uthappam (pancake) and
                                Italian pizza, topped with Cerignola olives, ripe vine
                                cherry tomatoes, Vidalia onion, Guntur chillies and
                                Buffalo Paneer.</p>

                    </div> 
                    </div>   
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="images/buffet.png" alt="buffet">
                        <div class="carousel-caption d-none d-sm-block">
                            <h2>Weekend Grand Buffet  <span class="badge badge-danger">New</span></h2>
                            <p class="d-none d-sm-block"> Featuring mouthwatering combinations with a choice
                                of live different salads, six enticing appetizers, six main entrees and five
                                choicest desserts. Free flowing bubbly and soft drinks. All for just
                                $19.99 per person.
                            </p>
                        
                    </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="images/alberto.png" alt="alberto">
                        <div class="carousel-caption d-none d-sm-block">
                            <h2>Alberto Somayya</h2>
                            <h4>Executive Chef</h4>
                            <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide
                                International experience having worked closely with
                                whos-who in the culinary world, he specializes in
                                creating mouthwatering Indo-Italian fusion experiences.
                            </p>
                    </div>
                    </div>
                </div>   
                                    <ol class="carousel-indicators">
                                        <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                                        <li data-target="#mycarousel" data-slide-to="1"></li>
                                        <li data-target="#mycarousel" data-slide-to="2"></li>
                                    </ol>
                                    <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon"></span>
                                    </a>
                                    <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon"></span>
                                    </a>
                                                    <div class="btn-group" id="carouselButton">
                                                        <button class="btn btn-danger btn-sm" id="carousel-pause">
                                                            <span class="fa fa-pause"></span>
                                                        </button>
                                                        <button class="btn btn-primary btn-sm" id="carousel-play">
                                                            <span class="fa fa-play"></span>
                                                        </button>
                                                    </div>

            </div>
        </div>
    </div>
</div>
</div>



<script src="JS/home.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="JS/home.js"></script>

  

</body>

</html>

Here is the CSS:

<pre lang="CSS">



.carousel {
    background:#512DA8;
}

.carousel-item {
  height: 300px;
 
}

.carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}

.carousel-caption {

    background-color:rgba(0,0,0,.3);
    padding: 20px 20px 0 20px;
    position:absolute;
    right:60px;
    left:35%;
    top:30px;
    height: 250px;
    width: 60%;
    z-index: 0;

}


#carouselButton {
    right:10px;
    position: absolute;
    bottom: 10px;
    z-index: .8;
}




What I have tried:

As I said, I inputted the code into CodePen and it worked.
Posted
Comments
Dave Kreskowiak 17-Nov-19 18:36pm
   
The IDE doesn't matter at all and doesn't affect if the code runs or not. Whether or not it works is entirely up the browser and your dev server setup.

Now, how the IDE interacts with and publishes your code to your web server may configured wrong, but there is no way we can possibly tell you what that is with the information you've provided.
DerekT-P 19-Nov-19 7:46am
   
Why are you referencing JSHome.js twice? And what does it do? We can't know what's in there and it may be the reason for the different behaviour. Is javascript throwing an error? Have you tried debugging it in (e.g.) Chrome's developer tools? When you say it won't work "in VSCode"... VSCode is a development environment / editor - what browser are you actually running the code in?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900