箭头纯CSS图像滑块

时间:2015-06-18 20:04:19

标签: html css image css3 slider

到目前为止,只有中间的幻灯片有正确的箭头指向左侧的左侧,箭头指向右侧的右侧。但是当你在左边或右边滑动箭头指向正确的方向时,我无法设法。

谢谢!

http://codepen.io/anon/pen/WvZGdb

HTML

<div id="slides">
 <input type="radio" name="slider" id="slide1" class="set"/>
 <input checked type="radio" name="slider" id="slide2" class="set"/>
 <input type="radio" name="slider" id="slide3" class="set"/>

 <div class="mask">
  <div class="overflow">
   <div class="slide"><img src="../images/work.png"/></div>
   <div class="slide"><img src="../images/work.png"/></div>
   <div class="slide"><img src="../images/work.png"/></div>
  </div>
 </div>

<div id="controls" onclick="">
 <label for="slide1">1</label>
 <label for="slide2">2</label>
 <label for="slide3">3</label>
</div>
</div>
</div>

CSS

input.set { 
display:none; 
}

#slide1:checked ~ .mask .overflow { margin-left:0; }
#slide2:checked ~ .mask .overflow { margin-left:-640px; }
#slide3:checked ~ .mask .overflow { margin-left:-1280px; }

#slides { 
margin:auto; 
width:760px; 
position:relative;
background-color:#096;
}

#slides .mask { 
width:640px;
overflow:hidden;
margin:auto;
}

#slides .overflow { 
width:300%;
-webkit-transition: ease-out 0.5s; 
}

#slides .slide { 
width: 640px;
height:480px; 
float:left; 
background: silver;
}

#controls label { 
display:none; 
width:60px; 
height:60px; 
opacity:0.5; 
position:absolute; 
top:50%; 
margin-top:-30px; 
cursor:pointer; 
background:#0C0;
}

#controls label:hover { 
opacity:1; 
}

#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(2) { right:0; display:block; }
#slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2) { left:0; display:block; }

1 个答案:

答案 0 :(得分:1)

我不知道我是否说得对,但我可以试试。根据我的阅读,您希望最后一张幻灯片上的箭头向后“移动”(“&lt;”)。

此解决方案的方法很少。

第一种方式

当你在最后一个div上添加一个类时,只需旋转180度。

#slide3:checked ~ #controls label:nth-child(2) {
  transform: rotate(180deg);}

第二种方式

在第一种方式中,为最后一个场景添加一个类,然后用矩阵翻转它。

#slide3:checked ~ #controls label:nth-child(2) {
  transform: matrix(-1,0,0,1,0,0);}

第三种方式

对我来说也许是最好的方式。您可以使用:before和content:“”将字母,图标或符号添加到标签中。所以标签是空的,你之前“填充”它们。

浏览器支持

前两种方法需要使用前缀。

  • IE&gt; 9 (IE 9需要前缀)
  • Firefox&gt; 3 (FF <15需要前缀)
  • Chrome (Chrome&lt; 35需要前缀)
  • Safari (需要前缀)
  • Opera &gt; 10(Opera&lt; 22需要前缀)

了解更多信息Can I use