Question

我创建了一个滑块，但我真的很难在右侧显示内容以支持左侧的图像。

我在jsfiddle上创建了一个副本工作模型Link to demo

正如您在我的HTML中看到的，我需要在slide-1和slide-2

内部的内容

<section class="new-angle-slider">
<div class="mask">
<ul class="images">
   <li class="slide-1 animated fadeInLeft">
      <img class="logo animated fadeInDown" src="http://mysite.co.uk/jbh-web/wp-content/themes/JBH/assets/img/slide-1.png" alt="Inside 8" title="Inside 8">
Content here to be on the right hand side.

<ul class="triggers">
   <li>0</li>
   <li>1</li>
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>
</section>

Answer 1

这是一个工作小提琴：https://jsfiddle.net/ssh2qjsu/7/

我更新的代码是：

您的HTML：刚刚在掩码di

中添加了一个带有类叠加的div

    <section class="new-angle-slider">
<div class="mask">
<ul class="images">
   <li class="slide-1 animated fadeInLeft">
      <img class="logo animated fadeInDown" src="http://jbhconcept.co.uk/jbh-web/wp-content/themes/JBH/assets/img/slide-1.png" alt="Inside 8" title="Inside 8">
      <div class="overlay">
This is where you can put your content for slide-1
</div>
   </li>
   <li class="slide-2 animated fadeInLeft">
      <img class="logo animated fadeInDown" src="http://jbhconcept.co.uk/jbh-web/wp-content/themes/JBH/assets/img/slide-2.png" alt="Inside 8" title="Inside 8">
   </li>
   <div class="overlay">
This is where you can put your content for slide 2
</div>
</ul>

</div>

<ul class="triggers">
   <li>0</li>
   <li>1</li>
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>
</section>

这是你们两个div的新CSS代码

.mask {
    width:100%;
    height:500px;
    overflow:hidden;
 }
.overlay{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:40%;
  background-color:red;
}

将幻灯片内容定位到右侧

1 个答案: