我想同时滑动缩略图和文本以及控制按钮。任何人都可以告诉我如何做到这一点。我不想要 Bootstrap slider ，因为该页面上已经有两个 slider 。
我的 HTML 代码
<div class="events">
<img src="slide-1.jpg" />
<h5>Date</h5>
<h2>Event name</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus pellentesque nunc, in eros liaculis id cursus consectetur.</p>
<a class="readmore" href="#">Read more</a>
</div>
CSS代码
.events {width:400px;}
.readmore {padding:8px 15px; background:#ff6000; color:#FFFFFF; text-decoration:none;}
最佳答案
我用一张幻灯片制作了一个示例，只要确保您要滑动的幻灯片是幻灯片容器中的第一个元素即可。希望这可以帮助。
文字位于图片的中央，图片有点像日志，所以你必须向下滚动一点才能看到它的效果。
$(".slide-out").click(function(){
$(".slides .slide:first").toggleClass("slide-left");
});.slide {
position: relative;
transition: all 1s;
left: 0;
}
.slide-left {
transition: all 1s;
left: -100%;
}
.slides {
display: flex;
justify-content: center;
align-items: center;
}
.slide img {
max-width: 400px;
}
.slide .caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
}
h4, p {
color: #fff !important;
}
button {
position: fixed;
}<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="controls">
<button class="slide-out">Toggle Slide</button>
</div>
<div class="slides">
<div class="slide">
<img src="http://previews.123rf.com/images/dvu/dvu0905/dvu090500006/4894562-compressed-orange-isolated-on-a-black-background-Stock-Photo.jpg" class="img-responsive"/>
<div class="caption">
<h4>Slide header</h4>
<p>Whatever caption you want</p>
</div>
</div>
</div>
</body>
</html>关于html - 如何同时滑动图片和文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38506230/