Bootstrap Carousel не работает, просто укладка изображений - PullRequest
Новая
       44

Bootstrap Carousel не работает, просто укладка изображений

0 голосов
/ 24 октября 2018

Я видел, что у других людей есть эта проблема.В одном случае человек просто забыл свой CDN Bootstrap, в другом он установил все свои слайды в «активный» и имел несколько «карусельных» классов.Я не делал ничего из этого.Так почему я получаю эту ошибку?Я видел кое-что о нужном util.js, если я «собираю [их] Javascript из источника», но я не думаю, что это то, что я делаю.Я просто делаю обычную старую веб-страницу. 

<!DOCTYPE html>
<html lang ="en-us">
<head>
  <meta charset="UTF-8">
  <title>About Me</title>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>

    @font-face {
    font-family: Kunstler Script;
    src: url(kunstler.ttf);
}

  #content {
    display: none;
  }

    #time {
      font-weight: bold;
    }

@media only screen and (max-width: 768px) {

  img{
    height: 150px;
  }


  /*Why isn't google developer tools responding to the change I made?*/
  /*Okay, evidently I've got a lot to learn about responsive design.*/
}
</style>

</head>

<body onload = "showStuff()">


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Dennis Markham</a>
    </div>
    <ul class="nav navbar-nav">
      <li class = "active"><a href="index.html">About Me</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</nav>

<div id = "content">

<div class ="row">
<div class = "col-md-1"></div>
<div class = "col-md-10">

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images/me1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/me2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/me3.jpg" alt="Third slide">
    </div>
  </div>
</div>


<h1>About Me</h1><p>Good <span id = "time">afternoon</span> 
  (yes, I know what time it is), sir or madam.  My name is Dennis Markham.  I am 28 years old, and a recent graduate of the University
  of Texas Austin Coding Bootcamp.  I also graduated with Certificate in Web Development from Norwalk Community College.  I am currently
  an instructor for <a href = "https://www.codingwithkids.com/#!/"> Coding With Kids</a>.
  I am looking for a job in web development, preferably front end.  I am particularly fluent in HTML, CSS, Javascript, and 
  JQuery, but also have experience in Java, Node.js, AJAX, SQL, PHP, ES5, ES6, Mongo, Mongoose, and React, as well as substantial 
  experience with softwares/websites such as Sublime, Netbeans, GitBash, GitHub, and SQL Workbench.</p> 
  <p>Signed,</p>
<span style = "font-family: French Script MT; font-size: 3em;">Dennis E. Markham</span> 
</div>
<div class = "col-md-1"></div>
</div>

</div>

<script>
  function showStuff() {
    $("#content").fadeIn("slow");
}

var hours = parseFloat(moment().startOf('day').fromNow());
console.log(hours);

if (hours >= 17 || hours < 5)
{
 $("#time").text("evening");
}
else if (hours < 12)
{
  $("#time").text("morning");
}
else
{
  $("#time").text("afternoon");
}

</script>

</body>
</html>

1 Ответ

0 голосов
/ 24 октября 2018

Обновите свой загрузочный cdn до самой последней ссылки.чек https://getbootstrap.com/docs/4.1/getting-started/introduction/

...