如何制作带有侧边栏的照片转盘？
[英]How to make a photo carousel with a sidebar?
问题描述
我想制作一个带有侧边栏的照片轮播，有点像带有照片和文字的最新新闻区。 我尝试使用下面的代码来做到这一点，但是照片彼此不重叠，而是变成了三张带有文字的照片。
这是我的轮播基础代码的链接。 （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>
这是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;
}
但是，当放置在适当的网站上时，照片看起来并不像滑块。 谢谢。
1 个解决方案
解决方案1
0 2018-05-28 22:06:20
您使用的示例基于bootstrap和jquery您必须添加：
<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>
和javascript侦听器（在slid.bs.carousel上）
如何在侧边栏中制作dropright？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.