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

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

}

Nov 17 '19 #1

Subscribe Post Reply

4418

gits

5,390

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

by: Farooq Khan | last post by:

hi, my development team has been assigned a project that involves writing our own Web service. i happen to be a C++ programmer, new to C#/ASP.net. i dont know where to begin with......any...

.NET Framework

I dont know how convert it to dataset or XML...

by: Pavel Novotny | last post by:

H I'm trying to import a | seperated text from string variable which represents a tabl with several fields, eg 6124079|PRIRUBA 11 DN250 PN6;CSN131160.0;11369.1;CSN131005.50|KS|11,100000|3437,...

.NET Framework

Dont know to pass parameters to stored procedure

by: arunavlp | last post by:

hi, I am new to .net , i am using VB.Net (Web form). I dont know how to pass parameters to stored function. Regards, Arun.S

.NET Framework

i want Decode This code 62EH&5gx0wiqoQFw i dont know the algorithm of this code

by: hojjatnikan | last post by:

please help me this code 62EH&5gx0wiqoQFw is this name ( Belux) but i dont know how convert it i dont know the algorithm of this code plead help me

Visual Basic 4 / 5 / 6

My menu seems to be heavy and I dont know why. Help?

by: Tiruak | last post by:

Hi there. Thanks in advance for the people reading and trying to help. I'm very begginer using flash and action script, and I tryed to do this one navigation menu. Since I dont have experience...

Flash / Actionscript

Java Swing Application Reload?

by: risk32 | last post by:

Hi all. I have a really confusing problem. I'm using Swing and I'm trying to do a confirmation box : int reply; String message = "Do you want to input another number?"; String title = "Input...

Java

i dont know what wrong with program..please help me

by: sailormoon | last post by:

this information i put in data.txt 11221 MOHD IRFAN 80 70 11222 NURUL FITRAH 80 90 11223 MOHD FARHAN 70 80 11224 WAFFIN WARDAH 80 60 11225 SYAMSUL 50 50 99999 TAMAT 0 0 #include<fstream.h>

C / C++

dont know whats wrong?

by: sometingsometing | last post by:

hi, I am new and dont know what went wrong. from Tkinter import * import tkMessageBox from pysqlite2 import dbapi2 as sqlite class door: global simpleprint

Python

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

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

Similar topics