467,179 Members | 1,358 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,179 developers. It's quick & easy.

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

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.  
Nov 17 '19 #1
  • viewed: 3722
Share:
1 Reply
gits
Expert Mod 4TB
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.
Nov 20 '19 #2

Post your reply

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

Similar topics

2 posts views Thread by Pavel Novotny | last post: by
risk32
8 posts views Thread by risk32 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.