Question

我可以将此滑块的按钮转换为两个箭头“下一个 - 上一个”吗？在这种情况下，每个幻灯片都有一个按钮，我只需要使用两个按钮，但是如何在下一个和上一个中转换输入？！用一个简单的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 + '%'});
});

滑块变换按钮到箭头

1 个答案: