I've been having trouble implementing Material Design Bootstrap's carousel. I copy and pasted the carousel example from their website, and I've made sure to have both the JS and CSS in the correct order when loaded. Currently my page only renders the image and text, and can be clicked on with a light effect, but no other images or slides appear and it never switches between them. It also creates a large whitespace on my screen after the carousel.
edit: Changed script.php to script.js
edit 2: Updated index.php that still doesn't work completely:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Site Name</title>
<?php //include_once $_SERVER['DOCUMENT_ROOT'].'/inc/head.php'; ?>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="https://site/css/style.css">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="https://site/js/app.js"></script>
</head>
<body>
<header>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/nav.php'; ?>
</header>
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Light mask</h3>
<p>First text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
<div class="mask rgba-black-strong"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Strong mask</h3>
<p>Secondary text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Slight mask</h3>
<p>Third text</p>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<div class='shell'>
<div class='container-fluid'>
<p class='content content-header' >Title</p>
<p class='content content-text' >Content</p>
</div>
</div>
</body>
<footer>
<?php include_once $_SERVER['DOCUMENT_ROOT'].'/inc/footer.php'; ?>
</footer>
edit 3: Pictures of before and after: Before
After
I blocked sensitive information. All my other pages work fine and there is no issue with CSS. It is just this carousel that doesn't seem to work.
In your index.php page in the head tag. Try adding all of your scripts there.For now just start with the CDN from their website.. Try replacing your tags with this.. Generally it's good to reference all the script and css files you are going to use inside the tags.
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js">
</script>
<link rel="stylesheet" href="https://site/css/style.css">
<script type="text/javascript" src="https://site/js/app.js"></script>
</head>
Related
I'm getting the issue as the images are getting listed of the slideshow. i want to show first image of the list when i run the code and other images need to get by clicking manually.
please help me regarding this issue.
Thanks.
Just use this bootstrap 4 snippet for Carousel
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>My Carousel</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17a4115b2a1%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17a4115b2a1%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.90625%22%20y%3D%22217.803125%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17a4115b29d%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17a4115b29d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3046875%22%20y%3D%22217.803125%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17a4115b2a7%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17a4115b2a7%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9921875%22%20y%3D%22217.803125%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Been struggling with this for days now.
I've installed a fresh laravel 5.5 application which in which I was planning to use VueJS. Onfurtunately I couldn't get it to work because it was loading the files but didn't execute them.
So my only solution is to use normal JS files. So I have two files:
js/app.js
js/script.js
app.js:
$(document).ready(function(){
console.log('app test js');
});
alert('app loaded');
script.js:
$(document).ready(function(){
console.log('script test js');
});
alert('script loaded');
In my console I can see the '$document ready' but there are no alerts or console.log's shown for the js/app.js and js/script.js. I can see the scripts are loaded and that my code is present.
Really hope someone can help me out since I'm now not able to proceed.
Down below are all the files that are used.
I have the following folder structure:
views/directevents/index.blade.php
index.blade.php
#extends('directevents.components.app')
#section('title', 'home')
#section('content')
<h1 class="page-title">
Welkom bij Direct Events
</h1>
<p>
Direct events is een evenementen bureau dat zich richt op thema evenementen.
Het bedrijf bestaat uit drie ondernemers met een passie voor organiseren. Ons
doel is om zowel de standhouders als de bezoekers een onvergetelijke dag te
bezorgen.
</p>
<div id="event-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#event-carousel" data-slide-to="0" class="active">
</li>
<li data-target="#event-carousel" data-slide-to="1"></li>
<li data-target="#event-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active text-center">
<a href="hippiemarkt-amsterdam-xl">
<img src="{{ asset('images/hippiemarkt-amsterdam-xl.png')
}}" alt="hippiemarkt amsterdam XL">
</a>
</div>
<div class="item text-center">
<a href="hippiemarkt-amsterdam-xl">
<img src="{{ asset('images/hippiemarkt-amsterdam-xl.png')
}}" alt="Chicago">
</a>
</div>
<div class="item text-center">
<a href="hippiemarkt-amsterdam-xl">
<img src="{{ asset('images/hippiemarkt-amsterdam-xl.png')
}}" alt="New York">
</a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#event-carousel" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#event-carousel" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row pages">
<div class="col-sm-4 text-center">
<a href="sponsoren">
<img src="{{ asset('images/sponsoren.png') }}" alt="sponsoren">
<h3>
Sponsoren
</h3>
</a>
</div>
<div class="col-sm-4 text-center">
<a href="standhouders">
<img src="{{ asset('images/standhouders.png') }}"
alt="standhouders">
<h3>
Standhouders
</h3>
</a>
</div>
<div class="col-sm-4 text-center">
<a href="partners">
<img src="{{ asset('images/partners.png') }}" alt="partners">
<h3>
Partners
</h3>
</a>
</div>
</div>
#endsection
since it extends views/directevents/components/app.blade.php i'll post it here too:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<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>Direct Events - #yield('title')</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css')
}}">
</head>
<body class="{{ $page }}">
<div id="wrapper" class="container">
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
<header>
#include('directevents.components.header')
</header>
#include('directevents.components.navbar')
<div class="content">
#yield('content')
</div>
<footer>
#include('directevents.components.footer')
</footer>
#include('directevents.components.popups')
</div>
<!-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.12.4.min.js"></script> -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script href="js/app.js"></script>
<script href="js/script.js"></script>
<script>
$(document).ready(function(){
console.log('$document ready');
});
</script>
</body>
</html>
Your scripts are included incorrectly, see: https://www.w3schools.com/tags/att_script_src.asp
You have:
<script href="js/app.js"></script>
Should be:
<script src="js/app.js"></script>
Note the "src"
In Chrome hit F12 and reload the page, look under Sources to verify they are loaded correctly.
Laravel 5.5 uses Laravel Mix. You should explore how this things work if you want it to be fully functional.
Here's what you need to do:
1. Install npm via nodejs installer
2. npm install
3. Compile your resources using npm run <config> (ex. npm run dev)
How easy can an answer be.
<script href="js/app.js"></script>
Should be
<script src="js/app.js"></script>
What do you think is the problem in here?
<html>
<head>
<meta charset="utf-8"> <!-- for character ">>" -->
<!-- solve problem for icon's flat UI -->
<title>Welcome!</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script src="javascript/jquery.js"> </script>
<script src="javascript/jquery.validate.min.js"> </script>
<script src="javascript/jquery-ui-1.9.2.custom.min.js"></script>
<script src="javascript/bootstrap.js"></script>
<script src="javascript/carousel.js"></script>
</head>
<body>
. . . .
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
It doesn't show the exact carousel. Instead it shows some missing links, but it has the features of scrolling. Does it have something to do with the .js and .css that must be included? Any ideas?
This looks like the exact code from the bootstrap website. Either way, the reason why missing links are showing up for you in this code is because you need to actually have a path set for your image source
...
<div class='item'>
<img src='<!-- whatever the path to your image is -->'> <!-- this is what is missing -->
<div class='carousel-caption'>
</div>
...
Furthermore, I would change the id of your carousel to something that makes sense for your webpage and that is easy to track for you. When doing don't forget to change the 'href' attribute on the controls to match the id of the new carousel id. Otherwise if it is scrolling and such, then it seems you have it set up correctly. Just make sure you actually add a path for your images.
Use this in your code, hope this may helpful
You need to initilize by using this:
$('.carousel').carousel()
I'm trying to get a simple carousel to work from Twitter Bootstrap 3.1.1. I've stripped it down to the simple generic Bootstrap mark-up with no styling but I've still had no luck getting the images to slide. Would appreciate any suggestions. My mark-up is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="test/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
<style type="text/css">
.container{
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<!-- carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="images/sample1.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/sample2.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/sample3.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
</div>
<!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div>
<!-- .carousel -->
<!-- end carousel -->
</div><!-- /container -->
<!-- Javascript-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<!-- Bootstrap jQuery plugins compiled and minified -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
It's probably because you're not pointing to a CDN version of bootstrap.min.js.
I say this because you're referencing jquery and the css from CDN locations but you're looking for the bootstrap.min.js to be local to your site. Is this how you have it configured?
Change it to use
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js
See http://jsfiddle.net/8vvqf/
Maybe you open the html file directly, instead of from a server. Then the CDN url will become
file://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
change
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
and try again?
Ok I seem to be having a problem here. I can't get my carousel to work. I've made sure I'm loading all the javascript files and even added Google's cdn link to be sure. I also believe I am calling it correctly. Some help would be greatly appreciated. Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Church of the Hills | Nashville TN</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom Google Web Font -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- Add custom CSS here -->
<link href="css/landing-page.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="dark-content-section">
<!-- /.container -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/girls-slide.jpg" alt="">
<div class="carousel-caption">
...
</div>
<img src="img/girls-slide.jpg" alt="">
<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>
</div>
<!-- /.dark-content-section -->
<!-- JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(function(){
$('#carousel-example-generic').carousel();
});
</script>
</body>
</html>
I believe you need to have one
<div class="item"> ... </div>
per image and in your code you only have one, yet you have 3 li's as indicators.
Try this:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojMzMzO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+">
</div>
</div>