Question

我正在为一个有三行的网站寻找一个Slider来切换/滑动文本或图像。任何人都知道这些优惠可以让我的身体与另一个头部交换，或者我的腿部与另一个头部相交......滑块可能像一个切换的立方体。

它不必是全尺寸，仅在中间居中，宽度为400到600，高度为400到600像素（对于所有三个滑块）左右。

滑块应如下所示：

＆LT; prev [img / txt] next＆gt;

如果这三条线可以相互作用，那将是最棒的事情; - ）

我们希望制作一个“配置器”，但没有功能，仅用于信息，所以在第一步中选择一个位置，在第二步中选择食物，在第三步中选择例如dj或乐队。与这三行的交互只应是活动的幻灯片，以便于阅读联系表格或其他内容。不再。

有人知道我要找的滑块吗？我已经搜索了几个小时，但找不到合适的。谢谢。

Answer 1

我为此使用slick。我写了一个关于如何使用它的例子。

＆＃13;

$(document).ready(function(){
  $('.slider').slick({
    infinite: true,
    arrows:true
  });
  $("#final").click(function () {
    console.log("Current slides:");
    console.log($('.slide1').slick('slickCurrentSlide'));
    console.log($('.slide2').slick('slickCurrentSlide'));
    console.log($('.slide3').slick('slickCurrentSlide'));
  });
});

＆＃13;

body {
  background:black;
}

.sliderContainer {
  padding:40px;
  color:white;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

<div class="sliderContainer">
  <div class="slider slide3">
    <div>your content1</div>
    <div>your content2</div>
    <div>your content3</div>
  </div>

  <div class="slider slide2">
    <div>your content1</div>
    <div>your content2</div>
    <div>your content3</div>
  </div>

  <div class="slider slide1">
    <div>your content1</div>
    <div>your content2</div>
    <div>your content3</div>
  </div>
</div>

<button id="final">Finalize</button>

＆＃13;

Answer 2

您可以使用"jQuery lightSlider"

Answer 3

致Jonathan，特别感谢fiffe。 :-) Slick看起来不错。并且nfn尼尔非常适合您的样品。我已经看到了经过改变和改变事件的事件，认为改变之后是我最好的方式。

顺便说一下：我很长时间都在阅读问题和答案，以便在c＃或jquery中找到答案，现在我发布了我的第一个问题，几分钟之内就成了很好的答案。伟大的网络与伟大的人在这里。

寻找一个3行的jQuery滑块

3 个答案: