I am new to bootstrap, I have started developing website using bootstrap, here is code I have used for Carousel, but images doesn't slides, any help would be appreciated
This is my html markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Microvillage Communications</title>
<link rel="shortcut icon" type="image/png" href="Images/favicon.png">
<link href="Css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Css/style.css" rel="stylesheet" type="text/css">
</head>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-offset-2">
<div class="row topmargin">
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-8 "><img class="img-responsive" src="Images/microvillage logo.jpg" width="360" height="60" alt=""/></div><!-- logo_container ends here-->
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<ul class="list-inline topmargin">
<li ><img class="img-rounded img-responsive" src="Images/facebookicon.png" width="30" height="30" alt=""/></li>
<li><img class="img-rounded img-responsive" src="Images/twitter.png" width="30" height="30" alt=""/></li>
<li><img class="img-rounded img-responsive" src="Images/linkedin.png" width="30" height="30" alt=""/></li>
<li><img class="img-rounded img-responsive" src="Images/google+.png" width="30" height="30" alt=""/></li>
<li><img class="img-rounded img-responsive" src="Images/youtube.png" width="30" height="30" alt=""/></li>
</ul>
</div><!-- container for social media-->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav nav-justified menu_bac">
<li class="active">Home</li>
<li>Company</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Products <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
<li>Support</li>
<li>Solution</li>
<li>Services</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Enquiry<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"></ul>
</li>
</ul>
</div>
</div><!-- row ends here-->
</div><!-- row ends here-->
<div class="col-sm-12 col-md-12 col-lg-12">
<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><!-- container for image slide-->
</div>
</div><!-- row ends here-->
</div><!-- container-fluid end here-->
</body>
</html>
it seems i am missing jQuery plugins, but unable to find the reason exactly
Your structure is not at all matching with bootstrap carousel, and you need not to add any extra js for carousel just use proper structure of carousel given in bootstrap, and your carousel will work
working example : http://jsfiddle.net/juddlyon/Q2TYv/10/
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slid', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
#import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');
#myCarousel {
margin-top: 40px;
}
.carousel-linked-nav,
.item img {
display: block;
margin: 0 auto;
}
.carousel-linked-nav {
width: 120px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/300x200/888&text=Item 1" />
</div>
<div class="item">
<img src="http://placehold.it/300x200/aaa&text=Item 2" />
</div>
<div class="item">
<img src="http://placehold.it/300x200/444&text=Item 3" />
</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>
<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
Related
Sorry for the size of the links....Stackoverflow doesn't allow link shorteners...
Earlier it was working just fine. But at the time of submission, when I was checking the whole output of the site, I noticed that it wasn't working at all...
It doesn't change on its on..which it use to do earlier...
When I click on the next or the previous button, it just looks as if it was ' href="#" ', it does nothing at all...
Here is the code -
HTML
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'/>
<li data-slide-to='1' data-target='#myCarousel'/>
<li data-slide-to='2' data-target='#myCarousel'/>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
</div>
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
CSS -
.carousel{
background: white;
width: 100%;
}
.carousel-item{
text-align: center;
min-height: 360px;
width: 100%;
}
I made a few changes to your code.
The mistakes that were fixed are the following inside of your carousel-indicators your <li> were first closed incorrectly, therefore, you must change them from
<li class='active' data-slide-to='0' data-target='#myCarousel' />
<li data-slide-to='1' data-target='#myCarousel' />
<li data-slide-to='2' data-target='#myCarousel' />
to
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
The second mistake I noticed you made was inside carousel-inner content
you should use the class carousel-item instead of item
The third mistake was the class name of the a tag is wrong and you didn't close the span correctly.
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
The a tag class names should be changed from this
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
to this
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
you didn't close a span probably.
Your span:
<span class='glyphicon glyphicon-chevron-left'/>
<span class='glyphicon glyphicon-chevron-right'/>
They should be closed like this
<span class='glyphicon glyphicon-chevron-left'></span>
<span class='glyphicon glyphicon-chevron-right'><span>
I also noticed that you were trying to add a custom icon. you can do that by replacing
<span class='glyphicon glyphicon-chevron-right'><span>
by ( the icon bootstrap uses )
<span class="carousel-control-next-icon" aria-hidden="true"></span>
or ( custom icon from fontawesome)
<span> <i class="fas fa-arrow-circle-left" aria-hidden="true"></i></span>
Don't forget to add the fontawesome CDN in your head if you are going to use the custom icon.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
===
Here is your code after applying all the fixes to it.
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='carousel-item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
</div>
<!-- Left and right controls -->
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class='sr-only'>Previous</span>
</a>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class='sr-only'>Next</span>
</a>
</div>
</div>
and here is a working example I added for you. using bootstrap 4.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="slider">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
<div class="overlay "> </div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
I am making a MEAN stack application using angular 7. I use a Bootstrap Carousel but it's not working.
#slider .item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide2">
<img src="../../assets/public/5.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide3">
<img src="../../assets/public/cardrive.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#slider" data-slide="prev" role="button"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#slider" data-slide="next" role="button"><span class="icon-next"></span></a>
</div>
Is there any mistake I am doing with the code? I think #slider is not working in angular 7.
As I already explained here (marked as duplicate but nothing happened):
You have to give all items (pictures) of the carousel the class
carousel-item but you only gave them the class item. Same with the
Previous and Next buttons. The classes should be carousel-control-prev and carousel-control-next but you only gave
them the class carousel-control.
The rest seems to be working just fine! When handling Bootstrap you
always have to look out for the classes since they have to be exactly
right for it to work at all. (You could also probably remove the
popper.js-script at the bottom since it is not used at all.)
So basically just change all <div class="item"> to <div class="carousel-item"> and add -next and -prev to the control
classes as I did here:
#slider .carousel-item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
.carousel-item>img {
width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide2">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide3">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slider" 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="#slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I have the same problem like that.
You must be careful to read again Getting Started carousel focused on Dependency.
https://ng-bootstrap.github.io/#/getting-started
Don't forget to add BootstrapCDN (content delivery network) in your HTML file:
https://www.bootstrapcdn.com/
this is my BootstrapCDN in my workspace:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I am creating timeline carousel as below.
So when we click on next or prev button it should move to next archive year and next archive panel.
For example if I click 2018, the 2018 circle should be highlighted and 2018 panel should be shown below.
Here's what I have tried but I couldn't create as expected.
<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">2019</li>
<li data-target="#carousel-example-generic" data-slide-to="1">2018</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!--<div class="box"></div>-->
<!--<div class="carousel-caption">
<h3>First Text</h3>
</div>-->
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading heading-background">
<h4 class="panel-title" style="cursor:pointer;" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true">
2019
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>
Archive 1
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!--<div class="box"></div>
<div class="carousel-caption">
<h3>Second Text</h3>
</div>-->
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading heading-background">
<h4 class="panel-title" style="cursor:pointer;" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true">
2018
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<p>
Archive 2
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" data-target="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" data-target="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
CSS
.heading-background {
background-color: rgba(45,175,220,0.8) !important; /* Sample Blue 2*/
}
/*Carousel Start*/
.carousel-indicators .active {
background-color: orange;
}
.carousel-indicators li {
border: 1px solid black;
}
.carousel-control {
width:5%;
}
/*Carousel End*/
Here is below example which you want.. Please have a look... :)
also check this link :
https://www.codeply.com/go/tBbcVXe1xZ
#myCarousel .list-inline {
white-space:nowrap;
overflow-x:auto;
}
#myCarousel .carousel-indicators {
position: static;
left: initial;
width: initial;
margin-left: initial;
}
#myCarousel .carousel-indicators > li {
width: initial;
height: initial;
text-indent: initial;
}
#myCarousel .carousel-indicators > li.active img {
opacity: 0.7;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<!-- main slider carousel -->
<div class="row">
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=one" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=two" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=three" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=four" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=five" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=six" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=seven" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=eight" class="img-fluid">
</a>
</li>
</ul>
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item carousel-item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-fluid">
</div>
<a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<!--/main slider carousel-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
I have been trying to solve a problem that I have on a website that I am building. The website displays correctly on a desktop browser when it is normal size, but when you make the browser window small or view the site on a mobile phone, I have a layer that overlaps with the footer div on the page.
Please look at this image of the problem:
The layer with the div that overlaps my footer has a class of logodiv, here is my css code for it:
.logodiv{
text-align: center;
top: 50%;
transform: translateY(-50%);
font-family: 'Quicksand', sans-serif;
font-size: 20px;
display: block;
}
The heading has a ID name of logoheadline and has the following css
#logoheadline{
font-family: 'Anton', sans-serif;
font-size: 58px;
position: relative;
}
Lastly my footer has a class name of footerz and it has the following css:
.footerz{
background-color: #323232;
min-height: 200px;
color: white;
font-family: 'Quicksand', sans-serif;
}
the intro-p div has the following css:
.intro-p{
font-family: 'Quicksand', sans-serif;
font-size: 20px;
position: relative;
}
this is the html I have:
<section id="section01" class="demo">
<div class="col-md-12" id="main-bd">
<div class="col-md-4 col-md-offset-1 logodiv" >
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive center-block" src="images/activities.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/chat.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/map.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/hot.png" height="470" width="245" alt="Activities">
</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>
<div class=" col-md-6 logodiv" >
<br>
<h1 id="logoheadline">Getting together has never been easier! </h1>
<p class="intro-p">Create events and activities, find hot new places to visit, see where your friends hang out all from within the spaze app!</p>
<button class="gbtnHollow">Download</button><br><br><br>
</div>
<span></span>
</div>
</section>
<section id="section02" class="demo2">
<div class="container-fluid footerz">
<div class="col-md-2">
<br>
<ul id="footerul">
<li><a href='privacy.html'>Privacy Policy</a></li>
<li><a href='terms.html'>Terms & Conditions</a></li>
<li><a href='#'>Ads</a></li>
</ul>
</div>
<div class="col-md-4">
<br>
<div class="col-md-4 col-md-offset-2">
<ul id="footerul">
<li>Contact Us</li>
<li><a href='#'>Our Story</a></li>
<li><a href='#'>Press Kit</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<br>
<div class="col-md-12 ">
<ul id="footerul">
<li><a href='#'>Jobs</a></li>
<li><a href='#'>Angel Investors</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<br>
<!--This is where all the social media buttons need to go.-->
<ul class="list-inline" >
<li> <img src="./images/facebook.png" alt="Facebook" width="35" height="35"> </li>
<li> <img src="./images/instagram.png" alt="Instagram" width="35" height="35"> </li>
<li> <img src="./images/twitter.png" alt="Instagram" width="35" height="35"> </li>
</ul>
</div><br>
<div class="col-md-12" style="text-align: center;">
<br>
</div>
</div>
</section>
I have been scratching my head for a while, can someone tell me what are my missing?
Remove that top :50% from your logindiv. top is used with position property of Css that may have created problem in your code. Basically avoid using position forcefully. Use them where when it is required.
You are using col-md- class only , that's why you have faced this issues, you can simply fix this you can add col-xs- classes instead of col-md- class , after 1200px col-md- classes getting 100% width
So, I'm working on making a slideshow using the bootstrap carousel. I want to have buttons that are inside the image, instead of buttons that are outside of the image. The code is below, you'll have to put it in a folder with images called photo1.jpg photo2.jpg and photo3.jpg.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Graphic design</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale-1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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-fluid">
<h1>Carter Goff Graphic Design</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
<ul class = "nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span></li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="photo1.jpg" alt="photo" width="500">
</div>
<div class="item">
<img src="photo2.jpg" alt="photo" width="500">
</div>
<div class="item">
<img src="photo3.jpg" alt="photo" width="500">
</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>
</body>
</html>
Thanks!
You could do it with absolute positioning or you could just make the background of the element your picture and then you can put whatever you want over it:
.item1{
background: url(pathtothebackground);
//any other css for your item
}