Почему код работает в "codepen", но не в "vscode"?
Я сделал карусель, которая вращается в CodePen, но не будет вращаться в VSCode. Атрибут, который заставляет его вращаться,-это тот, который говорит "data-ride="carousel", другими словами, если вы уберете этот атрибут, он не будет работать.
Я надеюсь, что кто-то может сказать мне, почему это не работает в VS-коде.
Вот этот 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;
}
Что я уже пробовал:
Как я уже сказал, я ввел код в CodePen, и он сработал.
Dave Kreskowiak
IDE не имеет никакого значения и не влияет на то, выполняется код или нет. Будет ли это работать или нет, полностью зависит от браузера и настройки вашего dev-сервера.
Теперь то, как IDE взаимодействует с вашим кодом и публикует его на вашем веб-сервере, может быть настроено неправильно, но мы никак не можем сказать вам, что это такое с предоставленной вами информацией.
DerekT-P
Почему вы ссылаетесь JSHome.js дважды? И что же он делает? Мы не можем знать, что там внутри, и это может быть причиной другого поведения. Является ли javascript выдачей ошибки? Вы пробовали отлаживать его в (например) инструментах разработчика Chrome? Когда вы говорите, что это не будет работать "в VSCode"... VSCode - это среда разработки / редактор-в каком браузере вы на самом деле запускаете код?