滑块将按钮转换为箭头

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>

Fiddle

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

滑块将按钮转换为箭头

Slider Transform button into arrow

html

css

slider

button

css-shapes