Question

我想制作一张旁边有侧边栏的照片旋转木马，有点像带有照片和一些文字的最新新闻区。我尝试使用下面的代码制作它，但照片不会相互重叠，而只是变成三张带文字的照片。

这是我基于旋转木马的代码的链接。（codepen）

    <!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;
}

然而，当放在合适的网站上时，照片看起来不像滑块。感谢。

Answer 1

您使用的示例基于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上）

如何制作带侧边栏的照片旋转木马？

1 个答案: