I am trying to make a carousel (or sliding images, not sure how to call it) on my page 'http://www.donnaliartist.com/testpage.php'
but the images just go invisible and I have no idea why.
here's my html code
<div id="slideImg" class="row centered moveup img">
<div class="slideMain">
<ul class="slide1">
<li><img src="assets/img/donna-megan.jpg" width="1151px" hspace="15" class="img-responsive"></li>
<li><img src="assets/img/donna-charcoal.jpg" width="1151px" hspace="15" class="img-responsive"></li>
</ul>
</div>
</div>
js script
<script type="text/javascript">
$(document).ready(function(){
$("#slideImg").rotate({
speed:10,
width:"900px",
slide1:".slide1"
});
});
</script>
and my js scripts on the bottom of the page
<script src="assets/js/slides.min.jquery.js"></script>
<script src="assets/js/jquery.rotate.js"></script>
You can't see the images because the height on #slideImg is 0. But I'm not sure about this line: $("#slideImg").rotate({.... Why are you using rotate here? Should this be $("#slideImg").slidesjs({...? After changing that, you might still need to pass a height option to slidesjs.
Looks like your code is rotating the element, e.g. 45 degrees. You want to alter the slide shown. There are numerous ways to do this. Personally, I like to do it with Bootstrap3, see the following
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="a.jpg" alt="a" width="460" height="345">
</div>
<div class="item">
<img src="b.jpg" alt="b" width="460" height="345">
</div>
<div class="item">
<img src="c.jpg" alt="c" width="460" height="345">
</div>
<div class="item">
<img src="d.jpg" alt="d" width="460" height="345">
</div>
</div>
<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>
</div>
</body>
</html>
Something like this, at the bottom of the page you have to click prevous or next or you have to add a timer
$('#slides').slidesjs({
width: 100,
height: 100
});
#slides {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nathansearles/Slides/SlidesJS-3/source/jquery.slides.min.js"></script>
<div id="slides">
<img src="http://www.donnaliartist.com/images/751425.jpg">
<img src="http://www.donnaliartist.com/images/201867.jpg">
</div>
Related
Everything works in My bootstrap carousel, except the slide effect doesn't happen even though I've added the "slide" CSS tag. The images quickly change; they don't slide.
Couple notes:
I'm using bootstrap v4.3.1.
I used the same mark-up as the bootstrap documentation.
My bootstrap javascript file is after the jquery file.
Any ideas?
Here is my HTML.
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slider-1.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/slider-2.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/slider-3.png" class="d-block w-100" />
</div>
</div>
<div class="carousel-controls">
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="/shared/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459__340.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459__340.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459__340.png" class="d-block w-100" />
</div>
</div>
<div class="carousel-controls">
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</footer>
</html>
I used your code in the <body> </body> section in repl.it and it works but there are some sizing issues tho. copied the code to here you can run it and see for yourself :) It slides as well
Edit*
I see you are inserting the carousel into a row and col, don't think you should do that but if you want to you need to make the correct size adjustments else the carousel will break the row and col each time it slides.
remove this section in your code inorder to make your carousel work properly
<div class="row">
<div class="col">
<div class="row">
Also, I think the reason why yours did not work is because of your HTML structure, and your bootstrap js and CSS CDNS wasn't imported correctly.
getbootstrap.com has a starter/Boiler template that you can always use with the correct imports, layout etc.
See here
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
When slide changes indicators are in right position (1-2-3). But when I click on them, they are not responding. Prev and next links are working fine. Here is my code:
<div id="theCarousel" class="carousel-slide hidden-xs" data-interval ="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
<li data-target="#theCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img class="img-responsive" src="eberhard-grossgasteiger-311213.jpg" alt="slide 1"></div>
<div class="item"><img class="d-block img-fluid" src="annie-spratt-176376.jpg" alt="slide 2"></div>
<div class="item"><img class="d-block img-fluid" src="joanna-kosinska-129039.jpg" alt="slide 3"></div>
</div><!-- /carousel-inner -->
<!-- navigation -->
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /carousel-slide --
Here is JS file:
// Activate Carouse
$("#theCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#theCarousel").carousel(1);
});
// Enable Carousel Control
$(".left").click(function(){
$("#theCarousel").carousel("prev");
});
$(".right").click(function(){
$("#theCarousel").carousel("next");
});
What is wrong?
Click button "Run code snippet" and check its working, No need to add extra script(js), All controls of carousel handled by bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<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 src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="New york" style="width:100%;">
</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>
I finally found out what went wrong. Instead of two classes: <div id="myCarousel" class="carousel slide" data-ride="carousel"> i wrote one with hyphen between: <div id="theCarousel" class="carousel-slide hidden-xs" data-interval ="3000">.
I have a carousel and im trying to replace the indicators with circle images, whenever i do it the image appears but the indicator doesn't disappear, i want to move the indicators and keep the image as an indicator, and i want to move the indicators to the left, how can i do that? here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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"><img src=" http://placehold.it/140x100" alt="...">
</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" role="listbox">
<div class="item active">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src=" http://placehold.it/350x150" 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" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Please try with this, If you need further assistance, comment bellow the answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.carousel-indicators{
list-style: none;
}
.carousel-indicators li, .carousel-indicators li.active{
width: 70px;
height: 70px;
background-color: #fff;
position: relative;
margin: 10px;
}
.carousel-indicators img{
position: absolute;
width: 100%;
border-radius: 50%;
height: 100%;
top: 0;
left: 0;
}
</style>
</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"><img src=" http://placehold.it/70x70" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="1"><img src=" http://placehold.it/70x70" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="2"><img src=" http://placehold.it/70x70" alt="..."></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
2
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Change carousel indicators position from bottom to left using ".carousel-indicators" class
add this style at bottom of your css file.
.carousel-indicators {
text-align: left;
left: inherit;
width: 15px;
top: 47%;
position: absolute;
left: 2%;
margin-left: 0;
}
I'm learning web dev and trying to build a site. I'm trying to make a carousel but with YouTube videos. What I have is working but it refuses to resize to my needs.
This is what I'm getting. A wide but short video size.
But this is what I want, nearest to full screen but I would like to retain the left/right navigation from the carousel and have them appear on top of the video content.
Here's my code: Pls, have a look:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > iframe,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body style="height:100%;">
<div style="height:100%;">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="height:100%;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" style="height:100%;">
<div class="item active" style="height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="item" style="height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="item" style="height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="item" style="height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<!-- Left and right 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>
</div>
</body>
</html>
height:100% is relative to the parent element. In this case html is the parent element and doesn't have a defined height. If you add height:100%; to the CSS of your html tag it should work:
<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
<title>Bootstrap Example</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > iframe,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body style="height:100%;">
<div style="height:100%;">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="height:100%;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" style="height:100%;">
<div class="item active" style="height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="item" style="height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="item" style="height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="item" style="height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<!-- Left and right 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>
</div>
</body>
</html>
I would also suggest using a style tag or an external stylesheet rather than inline CSS because it's easier to manage.
So everything appears to be working when I load up the html on bootply, but when I push it to my webpage (Github page) the carousel loads, but doesn't do any scrolling.
Heres the HTML I have pushed to the site, its exactly the same on Bootply except for the addition of the script near the top, which I read was needed to make it work, but it doesnt seem to do anything. It wasnt necessary on the Bootply apparently.
<head>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(function(){
$('#carousel-content').carousel();
});
</script>
<body>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class="nav">
<p><br><br></p>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Projects</li>
<li role="presentation">About Me</li>
<li role="presentation">Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="potrait">
<p><br><br></p>
<img src = "https://lh3.googleusercontent.com/-eQB0B8kGRiw/AAAAAAAAAAI/AAAAAAAAAAA/gRPFLBygtI8/photo.jpg" class="center-block img-circle" height="200" width="200">
</div>
<div class="info">
<p><br><br></p>
<h1 class="text-center"> Matt Kowalczykowski </h1>
<h2 class="text-center"> Mechatronics Engineering Student </h2>
<p><br><br></p>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-centered">
<div id="carousel-content" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-content" data-slide-to="0" class="active"></li>
<li data-target="#carousel-content" data-slide-to="1"></li>
<li data-target="#carousel-content" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://images.wisegeek.com/robots-assembling-car-bodies.jpg">
<div class="carousel-caption">
<h3>Mechanical</h3>
</div>
</div>
<div class="item">
<img src="http://seetech-corp.com/engineering/wp-content/uploads/2011/07/seetech-electrical-engineering-cabinets.jpg">
<div class="carousel-caption">
<h3>Electrical</h3>
</div>
</div>
<div class="item">
<img src="http://cdn.onextrapixel.com/wp-content/uploads/2013/07/clean-coding-best-practices.jpg">
<div class="carousel-caption">
<h3>Programming</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-content" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-content" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</body>
You don't need that top JavaScript, but you do need to load the Bootstrap Javascript files. Preferably right before the
</body>
tag.
<script src="link/to/bootstrap.min.js"></script>
For you I think it would be dist/js/bootstrap.min.js
You're not including bootstrap.js.
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>