Question

我想同时滑动缩略图图像和文本以及控制按钮。任何人都可以告诉我如何做到这一点。我不想要自举滑块，因为我已经在该页面上有两个滑块。

我的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;}

Answer 1

我用一张幻灯片编写了一个示例，只需确保要滑动的幻灯片是幻灯片容器中的第一个元素。希望这可以帮助。

文本在图像中居中，图像是一种日志，因此您必须向下滚动一下才能看到它的实际效果。

＆＃13;

$(".slide-out").click(function(){
  $(".slides .slide:first").toggleClass("slide-left");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何同时滑动图像和文本

1 个答案: