Html 滑块将按钮转换为箭头

我能把这个滑块的按钮转换成两个箭头“下一个-上一个”吗？！ 在这种情况下，每张幻灯片都有一个按钮，我只需要使用两个按钮，但如何在下一张和上一张中转换输入？！用一个简单的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>

滑块第二页

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子



滑块第三页

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子



滑块第四页

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子



滑块第五页

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子

拨弄

---

使用jQuery，我想到了这一点，显然它需要更多的工作，例如，当它通过最后一个滑块页面时停止。您可能还应该使用

transform:translate3d（）

而不是

left

，因为过渡会更平滑，尤其是在智能手机上

---

非常感谢你！！！我不知道如何才能停在最后一页，也许我会找到一个教程！或者也许有人能帮我！泰

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 + '%'});
});