Code works in "CodePen" but not "VS Code" --- Don't know how to fix it.

mattkrebs

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

Expand|Select|Wrap|Line Numbers

  
<!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 &nbsp;<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>

Here is the CSS:

Expand|Select|Wrap|Line Numbers

  
.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;

}

gits

well - i cannot tell what exactly happens in those IDEs - but the important thing is that it has to work in the browser(s). What i can see though so far is that you include a lot of scripts and for example the JS/home.js twice (other scripts as well - may be different versions? at least it looks not clean to me). That should be checked and fixed.

What IDEs are doing to let you preview what you code is often beyond common knowledge - so test the code in the browser(s) and not in the IDE. It could as well be that the code doesnt run in IE - which i would expect because i can imagine that MS is using the IE-engine for the preview - but IE's developer console can tell you where a problem might be. May be VS Code has such as well - but i dont/nor will i use it - so i can only guess.

Code works in "CodePen" but not "VS Code" --- Don't know how to fix it.

Post your reply

Similar topics