By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,581 Members | 1,975 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,581 IT Pros & Developers. It's quick & easy.

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

P: 5
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
  1.  
  2.  
  3. <!doctype html>
  4. <html lang="en">
  5.   <head>
  6.  
  7.     <!-- Required meta tags -->
  8.     <meta charset="utf-8">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  10.  
  11.     <!-- Bootstrap CSS -->
  12.     <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">
  13.    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
  14.    <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
  15.     <link rel="stylesheet" href="CSS/Index.css">
  16.  
  17.  
  18.  
  19.     <title>Ristorante Con Fusion: Home</title>
  20.  
  21. </head>
  22.  
  23. <body class="row-centered column-centered">
  24.  
  25.  
  26.  
  27.  
  28.  
  29. <div class="d-flex justify-content-center">
  30. <div class="container d-none d-sm-block" style="margin: 60px 0 40px 0">
  31.     <div class="row row-content">
  32.         <div class="col">
  33.             <div id="mycarousel" class="carousel slide" data-ride="carousel">
  34.                 <div class="carousel-inner" role="listbox">
  35.                     <div class="carousel-item active">
  36.                         <img class="d-block img-fluid" src="images/uthappizza.png" alt="Uthappizza">
  37.                         <div class="carousel-caption d-none d-sm-block">
  38.                             <h2> Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
  39.                             <p class="d-none d-sm-block" >A unique combination of Indian Uthappam (pancake) and
  40.                                 Italian pizza, topped with Cerignola olives, ripe vine
  41.                                 cherry tomatoes, Vidalia onion, Guntur chillies and
  42.                                 Buffalo Paneer.</p>
  43.  
  44.                     </div>
  45.                     </div>  
  46.                     <div class="carousel-item">
  47.                         <img class="d-block img-fluid" src="images/buffet.png" alt="buffet">
  48.                         <div class="carousel-caption d-none d-sm-block">
  49.                             <h2>Weekend Grand Buffet &nbsp;<span class="badge badge-danger">New</span></h2>
  50.                             <p class="d-none d-sm-block"> Featuring mouthwatering combinations with a choice
  51.                                 of live different salads, six enticing appetizers, six main entrees and five
  52.                                 choicest desserts. Free flowing bubbly and soft drinks. All for just
  53.                                 $19.99 per person.
  54.                             </p>
  55.  
  56.                     </div>
  57.                     </div>
  58.                     <div class="carousel-item">
  59.                         <img class="d-block img-fluid" src="images/alberto.png" alt="alberto">
  60.                         <div class="carousel-caption d-none d-sm-block">
  61.                             <h2>Alberto Somayya</h2>
  62.                             <h4>Executive Chef</h4>
  63.                             <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide
  64.                                 International experience having worked closely with
  65.                                 whos-who in the culinary world, he specializes in
  66.                                 creating mouthwatering Indo-Italian fusion experiences.
  67.                             </p>
  68.                     </div>
  69.                     </div>
  70.                 </div>  
  71.                                     <ol class="carousel-indicators">
  72.                                         <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
  73.                                         <li data-target="#mycarousel" data-slide-to="1"></li>
  74.                                         <li data-target="#mycarousel" data-slide-to="2"></li>
  75.                                     </ol>
  76.                                     <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
  77.                                         <span class="carousel-control-prev-icon"></span>
  78.                                     </a>
  79.                                     <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
  80.                                         <span class="carousel-control-next-icon"></span>
  81.                                     </a>
  82.                                                     <div class="btn-group" id="carouselButton">
  83.                                                         <button class="btn btn-danger btn-sm" id="carousel-pause">
  84.                                                             <span class="fa fa-pause"></span>
  85.                                                         </button>
  86.                                                         <button class="btn btn-primary btn-sm" id="carousel-play">
  87.                                                             <span class="fa fa-play"></span>
  88.                                                         </button>
  89.                                                     </div>
  90.  
  91.             </div>
  92.         </div>
  93.     </div>
  94. </div>
  95. </div>
  96.  
  97.  
  98.  
  99. <script src="JS/home.js"></script>
  100.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  101.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  102.         crossorigin="anonymous"></script>
  103.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  104.         integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
  105.         crossorigin="anonymous"></script>
  106.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  107.         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  108.         crossorigin="anonymous"></script>
  109.  
  110.     <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
  111.     <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
  112.     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  113.     <script src="JS/home.js"></script>
  114.  
  115.  
  116.  
  117. </body>
  118.  
  119.  
  120.  
Here is the CSS:

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3.  
  4. .carousel {
  5.     background:#512DA8;
  6. }
  7.  
  8. .carousel-item {
  9.   height: 300px;
  10.  
  11. }
  12.  
  13. .carousel-item img {
  14.     position: absolute;
  15.     top: 0;
  16.     left: 0;
  17.     min-height: 300px;
  18. }
  19.  
  20. .carousel-caption {
  21.  
  22.     background-color:rgba(0,0,0,.3);
  23.     padding: 20px 20px 0 20px;
  24.     position:absolute;
  25.     right:60px;
  26.     left:35%;
  27.     top:30px;
  28.     height: 250px;
  29.     width: 60%;
  30.     z-index: 0;
  31.  
  32. }
  33.  
  34.  
  35. #carouselButton {
  36.     right:10px;
  37.     position: absolute;
  38.     bottom: 10px;
  39.     z-index: .8;
  40. }
  41.  
  42.  
  43.  
  44.  
3 Weeks Ago #1
Share this Question
Share on Google+
1 Reply


gits
Expert Mod 5K+
P: 5,353
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.
3 Weeks Ago #2

Post your reply

Sign in to post your reply or Sign up for a free account.