CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapcarousel
msaldivar
msaldivar

Reputation: 45

Bootstrap carousel buttons appearing wrong

For my website the I used the bootstrap carousel for my home page. The carousel works but for some reason it's not displaying the next/prev arrows. I can click where the arrows would be to advance the carousel. The website is codehighway.org if anyone would like to inspect the elements. Here's the code for the home page as well. Any help would be great.

<!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">
    <title>Code Highway</title>

    <!-- Bootstrap -->
    <link href="bootstrap.min.css" rel="stylesheet">

  </head>
  <body>

<!-- Code for the nav-bar -->

<div class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="Home.html">Code Highway</a>
  </div>
  <div class="navbar-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Lessons</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="cs1.html">Computer Science 1</a></li>
          <li><a href="cs2.html">Computer Science 2</a></li>
          <li><a href="#">Algorithms and Data Structures</a></li>
        </ul>
      </li>
      <li><a href="Blog.html">Blog</a></li>
      <li><a href="About.html">About</a></li>
    </ul>
  </div>
</div>

<!-- End of nav-bar -->

<!-- Start of carousel -->

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Slider Content (Wrapper for slides )-->
  <div class="carousel-inner">
    <div class="item active">
      <img src="test.jpg" alt="quote"  style="float: none;margin:0 auto;display: block;">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="test2.jpg" alt="quote"  style="float: none;margin:0 auto;display: block;">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="test3.jpg" alt="quote"  style="float: none;margin:0 auto;display: block;">
      <div class="carousel-caption">
      </div>
    </div>    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>


<!-- End of carousel -->  



<!-- Code for jumbotron -->

<div class="jumbotron">
  <h1>Start learning code</h1>
  <p>Hello, I'm Maurice this is my personal website. I show programming concepts, my portfolio of projects, and a blog where I give tips tricks or any type of recommendations.</p>
</div>

<!-- End of jumbotron -->

  </body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap.min.js"></script>
</html>

Upvotes: 1

Views: 648

Answers (1)

Nicky McCurdy
Nicky McCurdy

Reputation: 19524

Your Bootstrap stylesheet is being hosted at http://codehighway.org/bootstrap.min.css. However, this stylesheet is searching for the glyphicon font files at ../fonts/. This path does not exist, which causes your font files to 404, which causes your icons to break.

You should move bootstrap.min.css to a new directory at /css and the fonts to a new directory at /fonts. This should fix your issues with relative paths and get the icons to work.

An alternate solution is to use a CDN like Bootstrap CDN to host these files for you (and their version of bootstrap.min.css includes links to their hosted glyphicon font files).

Upvotes: 1

Related Questions