Recently stumbled upon this code snippet on codeply and decided to try it out in Visual Studio. Oddly enough, everything appeared fine on the snippets page, but when I ran it on my own computer, I encountered this https://i.sstatic.net/wmGII.png. It's puzzling why this discrepancy exists. Additionally, an error message popped up:
script.js:1 Uncaught ReferenceError: $ is not defined at script.js:1$('.carousel[data-type="multi"] .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});.carousel-control { width: 4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
@media (max-width: 767px) {
.carousel-inner .active.left { left: -100%; }
.carousel-inner .next { left: 100%; }
.carousel-inner .prev { left: -100%; }
.active > div { display:none; }
.active > div:first-child { display:block; }
}
@media (min-width: 767px) and (max-width: 992px ) {
.carousel-inner .active.left { left: -50%; }
.carousel-inner .next { left: 50%; }
.carousel-inner .prev { left: -50%; }
.active > div { display:none; }
.active > div:first-child { display:block; }
.active > div:first-child + div { display:block; }
}
@media (min-width: 992px ) {
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next { left: 25%; }
.carousel-inner .prev { left: -25%; }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="assets/css/styles.css" /> -->
<!-- <script src="assets/script.js"></script> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src='Untitled-1.js'></script>
<link rel="stylesheet" href='Untitled-1.css'/>
</head>
<body>
<div class="col-md-12 text-center"><h3>Product Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</body>
</html>