將滑塊變換按鈕變爲箭頭

Question

我可以將此滑塊的按鈕變成兩個箭頭「Next - Previous」嗎？ 在這種情況下，每個幻燈片都有一個按鈕，我只能使用兩個按鈕，但是如何將輸入轉換爲下一個和前一個？用一個簡單的JS或我可以解決問題與CSS？

<div id="slider-wrapper"> 
    <input type="radio" id="button-1" name="buttons" checked="checked"/> 
    <label for="button-1"></label> 
    <input type="radio" id="button-2" name="buttons"/> 
    <label for="button-2"></label> 
    <input type="radio" id="button-3" name="buttons"/> 
    <label for="button-3"></label> 
    <input type="radio" id="button-4" name="buttons"/> 
    <label for="button-4"></label> 
    <input type="radio" id="button-5" name="buttons"/> 
    <label for="button-5"></label> 

    <div id="slider"> 
    <ul> 
     <li id="slide1"> 

     <img src="images/img1.jpg" width="400" height="400" alt=""/> </li> 
     <li id="slide2"> 
      <p>Slider Page Two<br> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
      </li> 
      <li id="slide3"> 
      <p>Slider Page Three<br> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
       </li> 
      <li id="slide4"> 
       <p>Slider Page Four<br> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
       </li> 
       <li id="slide5"> 
       <p>Slider Page Five<br> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
        </li> 
       </ul> 
       </div> 
      </div> 

小提琴

http://jsfiddle.net/tMxp5/274/

謝謝。

Answer 1

使用了一點jQuery，我想出了這個，顯然它需要更多的工作，例如當它通過最後一個滑動頁面時停止。您應該也可以使用transform: translate3d()而不是left，因爲轉換更平滑，特別是在智能手機上。

http://jsfiddle.net/tMxp5/275/

var left = 0; 

$('#button-1').click(function() { 
    left = left + 100; 
    $('#slider ul').css({left: left + '%'}); 
}); 

$('#button-2').click(function() { 
    left = left - 100; 
    $('#slider ul').css({left: left + '%'}); 
});