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

5 New Member

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 Reply

4431

gits

5,390

Recognized Expert Moderator Expert

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

Similar topics

1665

dont know where to begin with...writing Web service

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 article/book/link or anything that can help me start coding/getting those concepts, will be appreciated. Thanx, Farooq Khan

.NET Framework

301

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, 6124080|PRIRUBA 11 DN200 PN6;CSN131160.0;11369.1;CSN131005.50|KS|8,870000|2761, I dont know how convert it to dataset or XML... Is there any...

.NET Framework

1303

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

2700

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

2484

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 doing this, I did things in a way I thought it should work, to create the onmouseover animation of the buttons of my navigation menu. After a couple...

Flash / Actionscript

5672

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 Another Number?"; reply = (JOptionPane.showConfirmDialog(null, message, title, JOptionPane.YES_NO_OPTION); if (reply == JOptionPane.NO_OPTION) {...

Java

2042

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++

1716

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

7694

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7609

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

7666

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

5217

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

3651

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...

Networking - Hardware / Configuration

3636

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2107

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1208

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

936

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General