html - 如何同时滑动图片和文字-6ren

html - 如何同时滑动图片和文字

转载作者：行者123 更新时间：2023-11-28 05:31:09

我想同时滑动缩略图和文本以及控制按钮。任何人都可以告诉我如何做到这一点。我不想要 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>