Twitter Bootstrap Carousel not rotating images - javascript

The active image is displaying but nothing happens after that. I am new to Bootstrapper so I was hoping someone could let me know if I am missing libraries, or have to syntax wrong. I looked around and everything seems to be right?
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span></a>
California Autism Center & Learning Group
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Our Staff</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hero-unit">
<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" alt=""><img src="img/Banner.jpg"/></div>
<div class="item" alt=""><img src="img/autism1.jpg"/></div>
<div class="item" alt=""><img src="img/autism2.jpg"/></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<h3>How We Started</h3>
<p>Add information here.</p>
<h3>Our Goals</h3>
<p>Add nformation here.</p>
</div>
</div>
<hr>
<div class="container">
<div class="row-fluid">
<div class="span4">
<p>© 2013 </p>
</div>
<div class="span4 text-center">
<ul class="nav inline">
<li>About Us</li>
<li>Contact Us</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="span4 text-right">
<p></p>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
my .js code:
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 2000
})
});

Try this before the closing body tag. It works when I've used in on BS2 & 3.
<script>
$('.carousel').carousel({
pause:false,
interval:7000
})
</script>

I've created a Fiddle from your code and it works fine (beside the fact that images are 404 placeholders). My guess is that the problem is in those quotes your using here:
<script src=”js/bootstrap.js”></script>
My Chrome doesnt't treat those as normal quotes and in facts this line turns to:
<script src="”js/bootstrap.js”"></script>

Related

Trying to lock resoltution of DIV in bootstrap to specific resolution

I am trying to make a remote display server that can generate slide shows from pictures you give it. Since it will drive a variety of displays it needs to lock the resolution of certain elements that will display full screen on the display side. I can lock the width, but the height refuses to lock in with everything I try. Here is some code that pulls images of various aspect ratios that illustrate the problems.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Website: display page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--My styles sheet -->
<link rel="stylesheet" type="text/css" href="/static/styles.css">
<!-- My Java Scripts -->
<script src="/static/js/moment.min.js"></script>
<!-- Script from server for moment text generator -->
<script src="/static/scripts.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/index">A website</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Query All Users</li>
<li>Add User</li>
<li>Edit Users</li>
<li>Groups Admin</li>
<li>Kiosk Admin</li>
<li>Display Admin</li>
</ul>
<li class="nav-item"><a class="nav-link" href="/messages">Messages</a></li>
<li class="nav-item"><a class="nav-link" href="/user/snyder">Your Profile</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="/logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div>
</nav>
<div class="full-screen-scroller" style="width: 500px; height: 400px; background-color: powderblue;">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img style="width: 100%; max-height: 100%;" src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Boeing_B-29_Superfortress_Bockscar_USAF.jpg" alt="Bockscar!">
<div class="carousel-caption"><h3>Bockscar!</h3></div>
</div>
<div class="item">
<img style="width: 100%; height: 100%;" src="https://s1.cdn.autoevolution.com/images/gallery/TESLA-MOTORS-Model-S-4693_78.jpg" alt="Tesla!">
<div class="carousel-caption"><h3>Tesla!</h3></div>
</div>
<div class="item">
<img style="width: 100%; max-height: 100%" src="https://previews.123rf.com/images/sleepyhollow/sleepyhollow1709/sleepyhollow170900002/85803845-african-giraffe-portrait-with-blue-sky-and-green-yellow-vegetation-background-.jpg" alt="Giraffe!">
<div class="carousel-caption"><h3>Giraffe!</h3></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Why is the whole site jumping when using affix?

I am using a navbar and a subnav under a Carousel. And my subnav should be fixed after getting there. It is fixed but content is jumping.
if i only would use a container above i would already have found a solution but it don't work for me, so its still jumping..
I already saw some solutions but don't get it..
so what am i doing false?
https://jsfiddle.net/sdkpj9f3/
.navbar {
margin-bottom: 0;
}
#myCarousel {
padding: 0px;
}
.subnav {
margin: 0px;
top: 0px;
background: rgba(85, 93, 106, 0.7);
border-style: none;
}
.subnav.affix {
position: fixed;
top: 0;
width: 100%;
}
.subNav-item:hover {
font-size: 20px;
background: rgba(111, 131, 158, 0.2);
}
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navtop">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navtop">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--LOGO-->
<a href="index.html" class="">
<img src="images/logos/RULogo.png" style="height: 50px; width: 50px;">
</a>
</div>
<!--NAV START-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="">Gallery
</li>
<li class="">Shop
</li>
<li class="">Blog
</li>
<li class="">About & Contact
</li>
</ul>
</div>
<!--NAV END-->
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/picture3.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Welcome</h1>
<h2>kjlkjkl</h2>
</div>
</div>
<div class="item">
<a href="contact.html" class="no-link">
<img src="images/picture1.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Who?</h1>
</a>
<h2>Developers</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--SlideShow END-->
<!--SubNav-->
<nav class="navbar subnav" role="navigation">
<div class="collapse navbar-collapse collapse-buttons">
<ul class="nav navbar-nav navbar-right">
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
</ul>
</div>
</nav>
<!--END SUbnav-->
<div id="Code" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
<div class="col-sm-4">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center">
<h2>Portfolio</h2>
<br>
<h4>What we have created</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture1.jpg" alt="Paris" width="400" height="300">
<p><strong>bla blaa</strong>
</p>
<p>blablablabll lbalabl lab lab</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture2.jpg" alt="New York" width="400" height="300">
<p><strong>blablabla</strong>
</p>
<p>blablabalbalbala</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture3.jpg" alt="San Francisco" width="400" height="300">
<p><strong>blablabalbal</strong>
</p>
<p>bla, blabla bla ba</p>
</div>
</div>
</div>
<br>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var h = $('.navtop').height();
var h2 = $('#myCarousel').height();
var h3 = h + h2;
$('.subnav').affix({
offset: {
top: 1200
}
});
</script>
<body>
</html>
Usually when the site jumps from affix, it's because the header becomes position fixed and leaves the layout and is position on top of the content itself. The rest of the site "jumps" up the height of the header.
One thing you can do is wrap your navbar in a wrapper and give the navbar wrapper the height of the nav.
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top navtop">
<!-- the rest of your nav code is here -->
</nav>
</div>
and in css
.navbar-wrapper { height:60px; } /* or whatever the height of the nav is */
You can find the height of your nav by using the browser inspector or by guessing until the jump disappears.
Here is your Jsfiddle, cleaned up a bit so it works.

how to fixed a navbar and Carousel image slider in bootstrap

i have a header with a navbar and a Carousel sliding image using bootstrap
how can i fixed this two together on scroll
when the user scroll the website to see the information the navbar and carousel still fixed on the top and the information scroll under the header
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Services
</li>
<li>
Factory
</li>
<li>
Projects
</li>
<li>
Clients
</li>
<li>
Video
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="row">
<img src="img/logo%20corner.png" class="center-block img-responsive imglogo">
</div>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<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>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide1.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide2.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide3.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
If i have understood I give you a link where you can find your happiness.
http://www.w3schools.com/howto/howto_css_parallax.asp
Hope help you :)
I added the full code for you to have as a resource to reference with your document because what you posted is the stock bootstrap template with no input. Double check and make sure you have the latest bootstrap installed and are linking the files correctly. Below I used a CDN, but its better to have it downloaded.
The main thing to make sure you have the fixed header navigation is the following code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
You can find the above code in the below code. Let me know if you have any questions.
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /container -->
</div>
<!-- /navbar wrapper -->
<!-- Carousel -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<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>
<div class="carousel-inner">
<div class="item active">
<img src="/root/directory/file_path.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small="">
<p></p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p>
</pthis>
</div>
</div>
</div>
<div class="item">
<img src="/root/directory/file_path.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a>
</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</body>
</html>

Bootstrap carousel error with images when i click

I have problem with my carousel slider.
The problem is: when i click on next o prev button nothing is happend. I read some articles here on stack but no one helped me. I tried some other carousels, but same result
Thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<!--<div class="header">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Úvod</li>
<li>Ubytování</li>
<li>Mapa</li>
<li>Ceník</li>
<li>Fotogalerie</li>
<li>Kontakt</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" />
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--<div class="content">
<div class="title_content">Ubytování Macalíkovi</div>
<div class="room1"><p>Všechny pokoje mají společnou kuchyň a sociální zařízení. Kuchyň je vybavena sporákem, troubou, varnou konvicí, mikrovlnou troubou, chladničkou a nádobím.</p></div>
<div class="room2"><p>Samozdřejmě můžete také využívat prosklennou verandu, která je přístupná z chodby pro všechny ubytované.</p></div>
<div class="room3"><p>V každém pokoji najdete televizi, která je připojenak satelitu, kde najdete velké množství kanálů, pro vaše větší pohodlí.</p></div>
</div>
<div class="footer">
<div class="author"># 2014 Macalíkovi, Všechna práva vyhrazena</div>
</div>
<!--<script>$("#carousel_nav").click(function(){
var item = 4;
$('#home_carousel').carousel(item);
return false;
});</script>--> <!-- -->
<script>
$(document).ready(function(){
console.log("hello world");
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$holder = $( "ol li.active" );
$holder.removeClass('active');
var idx = $('div.active').index('div.item');
$('ol.carousel-indicators li[data-slide-to="'+ idx+'"]').addClass('active');
});
$('ol.carousel-indicators li').on("click",function(){
$('ol.carousel-indicators li.active').removeClass("active");
$(this).addClass("active");
});
});
</script>
this is probably something to do with missing JQuery library,I added your HTML+JQuery and it worked.
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
here's a working example: http://jsfiddle.net/choroshin/2svAm/

BootStrap 3 carousel is not working

here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div>
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="Images/Design/facebook.png" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item ">
<img src="Images/Design/linkedin.png" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item ">
<img src="Images/Design/yahoo.jpg" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
<div class="item ">
<img src="Images/Design/Mahdi_Hesari#YMail.com.jpg" alt="..."/>
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</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>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
</body>
</html>
i think every thing is ok and it have to work. but it's not working even when i click on next and prev buttons.
where is the problem?
i'm using bootsrap version v 3.0.3 in visual studio 2012.
thank you very much
You have to include first jQuery library, then bootstrap.js:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
Likely, you are currently getting this error: Uncaught ReferenceError: jQuery is not defined
You need to reverse the order in wihch you include the jquery/boostrap js files. Bootstrap has jquery as a prerequisite, so it needs to find it there by the time it's loaded.

Categories