寻找一个 3 行的 jQuery 滑块 [关闭]答案

【问题标题】：Looking for a jQuery Slider with 3 Lines [closed]寻找一个 3 行的 jQuery 滑块 [关闭]
【发布时间】：2017-06-01 23:15:06
【问题描述】：

我正在为一个网站寻找一个滑块，该滑块具有三行来切换/滑动文本或图像。任何人都知道这些提议将我的身体换成另一个头，或者我的腿换成另一个……滑块可以像一个立方体那样开关。

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

滑块应如下所示：

如果这三行可以交互，那将是有史以来最伟大的事情；-)

我们想制作一个“配置器”，但没有任何功能，仅供参考，因此第一步选择位置，第二步选择食物，第三步选择例如 dj 或乐队。与这三行的交互应该是活动幻灯片，以便于阅读联系表格或其他内容。不再。

有人知道我正在寻找的滑块吗？我已经搜索了几个小时，但没有找到合适的时间。谢谢。

【问题讨论】：

试试 slick.js - 它是高度可定制的
看起来不错，在页面上放了三张幻灯片。但是您有“阅读”三个滑块的活动幻灯片的想法吗？
Slick 带有允许您读取数据属性等的方法。您所描述的完全可以使用 slick 轻松实现
什么我不明白，为什么要否决这个问题？？？它包含我需要的描述，我问了一些原因，因为我不知道正确的插件或代码，现在投票否决？我没有要求完成的代码或“嘿，有人可以为我编写这个代码吗”，我要求可以用我的问题构建的滑块......对不起，无法理解这个...... :-(

标签： jquery html css

【解决方案1】：

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

$(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'));
  });
});

body {
  background:black;
}

.sliderContainer {
  padding:40px;
  color:white;
}

<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>

【讨论】：

【解决方案2】：

您可以使用"jQuery lightSlider"

【讨论】：

谢谢，我认为 slick 是正确的方法... :-) 样本看起来很棒。 LightSlider 也不错。但我认为会很顺利地实现它。

【解决方案3】：

感谢 Jonathan，特别感谢 fiffe。 :-) Slick 看起来不错。 nfn Neil 非常适合您的样品。我已经看到了 after change 和 bevore change 事件，认为 after change 是我最好的方式。

顺便说一句：我很长一段时间都在阅读问题和答案，以获得我在 c# 或 jquery 中的方式的答案，现在我已经发布了我的第一个问题，并在几分钟内成为了很好的答案。这里有很棒的人脉。

【讨论】：