I want to make a photo carousel with a sidebar next to it, kind of like a latest news area with a photo and some text. I have tried making it with the below code but the photos don't overlap each other and instead just become three photos with text.
Here's a link to the code that I based my carousel off. (codepen)
https://codepen.io/_danko/pen/mEjgzp
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 class="text-center">Bootstrap carousel with sidebar</h2>
<h3 class="text-center">This feature does not exist in official Bootstrap</h3>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-1">
<div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic"></li>
<li data-slide-to="2" data-target="#carousel-example-generic"></li>
<li data-slide-to="3" data-target="#carousel-example-generic"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="http://via.placeholder.com/600x400/D6BC65/fff?text=First+img"></div>
<div class="item"><img src="http://via.placeholder.com/600x400/008A84/fff?text=Second+img"></div>
<div class="item"><img src="http://via.placeholder.com/600x400/18AAA9/fff?text=Third+img"></div>
<div class="item"><img src="http://via.placeholder.com/600x400/C993A0/fff?text=Fourth+img"></div>
</div><!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
</div><!-- /.carousel -->
</div><!-- /.col-sm-8 -->
<div class="col-sm-3">
<div class="result">
<p class="active-p" data-slide-to="0" data-target="#carousel-example-generic">01. This text is related to 01. slide</p>
<p data-slide-to="1" data-target="#carousel-example-generic">02. This text is related to 02. slide</p>
<p data-slide-to="2" data-target="#carousel-example-generic">03. This text is related to 03. slide</p>
<p data-slide-to="3" data-target="#carousel-example-generic">04. This text is related to 04. slide</p>
</div>
</div><!-- /.col-sm-8 -->
</div><!-- /.row -->
</div><!-- /.container -->
<div class="author">
Made with ♥ by <a href="https://dankoknad.github.io/" target="_blank">Danko</a>
</div>
</body>
</html>
Here's the CSS
body {
padding-top: 50px;
}
h3 {
margin-bottom: 50px;
}
.carousel {
min-height: 200px;
margin-bottom: 15px;
}
.carousel-indicators li {
box-shadow: 1px 1px 1px rgba(145, 145, 145, 0.5);
}
p {
padding: 10px;
}
.active-p {
background: #00BCD4;
color: #fff;
}
@media only screen and (min-width: 768px) {
p {
height: 50px;
cursor: pointer;
}
}
@media only screen and (min-width: 992px) {
p {
height: 68px;
}
}
@media only screen and (min-width: 1200px) {
p {
height: 85px;
line-height: 85px;
padding: 0 10px 10px 10px;
}
}
.author {
padding-bottom: 20px;
margin-top: 50px;
text-align: center;
font-size: 14px;
}
However, when put on a proper website the photos don't look like a slider. Thanks.
the example you use is based on bootstrap and jquery You have to add :
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
and the javascript listener (on slid.bs.carousel)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.