Menu
The two left and right chevron glyphicon are not showing, it works, but it shows a square box for some reason. When I click the positions where the glyhicons are I can scroll through pictures so all that is not right is the appearance of the glyphicons the left and right arrow usually expected are not showing?
<!DOCTYPE html>
<html>
<head>
<title>Student Association</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="carousel slide" data-ride="carousel" id="carousel-ex">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-ex"></li>
<li data-slide-to="1" data-target="#carousel-ex"></li>
<li data-slide-to="2" data-target="#carousel-ex"></li>
<li data-slide-to="3" data-target="#carousel-ex"></li>
<li data-slide-to="4" data-target="#carousel-ex"></li>
<li data-slide-to="5" data-target="#carousel-ex"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img alt="abuja" class="img-responsive" id=
"afCountries" src="img/african-countries/abuja-nigeria.jpg">
<div class="carousel-caption">
<h3>Abuja, Nigeria</h3>
</div>
</div>
<div class="item"><img alt="accra" class="img-responsive" id="afCountries" src=
"img/african-countries/accra-ghana.jpg">
<div class="carousel-caption">
<h3>Accra, Ghana</h3>
</div>
</div>
<div class="item"><img alt="kigali" class="img-responsive" id="afCountries"
src="img/african-countries/kigali-rwanda.jpg">
<div class="carousel-caption">
<h3>Kigali, Rwanda</h3>
</div>
</div>
<div class="item"><img alt="durban" class="img-responsive" id="afCountries"
src="img/african-countries/durban-southafrica.jpg">
<div class="carousel-caption">
<h3>Durban, South Africa</h3>
</div>
</div>
<div class="item"><img alt="Johannesburg" class="img-responsive" id=
"afCountries" src="img/african-countries/Johannesburg-South_Africa.jpg">
<div class="carousel-caption">
<h3>Johannesburg, South Africa</h3>
</div>
</div>
<div class="item"><img alt="kenya" class="img-responsive" id="afCountries" src=
"img/african-countries/kenya.jpg">
<div class="carousel-caption">
<h3>Kenya</h3>
</div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href=
"#carousel-ex"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" data-slide="next" href=
"#carousel-ex"><span class=
"glyphicon glyphicon-chevron-right"></span></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</body>
</html>
386
The . active class needs to be added to one of the slides otherwise the carousel will not be visible. Also be sure to set a unique id on the . carousel for optional controls, especially if you're using multiple carousels on a single page.
You can simply use the data-interval attribute of the carousel class. It's default value is set to data-interval="3000" i.e 3seconds. All you need to do is set it to your desired requirements.
Step by step guide for the implementation: Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS. Step 2: Add <div> tag in the HTML body with class container. Step 3: Now add any icon that you want using the below syntax, where the name is the name of glyphicon.
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
Similar to Jyrkim, your solution works for example editors like Bootply and JSFiddle. My only thought is that you're missing the fonts section of your bootstrap folder. White Squares is a placeholder for a character that can't be found in the current font type, like a special character in a custom font. It may render as [] instead of something like * or &. Make sure your folder structure in Bootstrap is set up as follows:
bootstrap
-> css
-> bootstrap-theme.css
-> bootstrap-theme.css.map
-> bootstrap-theme.min.css
-> bootstrap.css
-> bootstrap.min.css
-> theme.css
-> fonts
-> glyphicons-halflings-regular.eot
-> glyphicons-halflings-regular.svg
-> glyphicons-halflings-regular.ttf
-> glyphicons-halflings-regular.woff
-> js
-> bootstrap.js
-> bootstrap.min.js
I would bet any money that the fonts folder is not there, or not linked properly. If your folder structure is the same as above, you can link the .css file like so:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
Hope that helps!
Note
Using the CDN version of the style sheet will cause this to not be an issue, but may increase load time.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
