寻找特定类型的jQuery内容滑块

Question

我正在寻找特定类型的内容滑块，但我还没有真正找到我需要的内容。它不是我看起来很难找到的内容滑块，而是具有特定类型寻呼机的滑块。正如您将从下图中看到的那样，实际内容下方会有一个红色条。我正在寻找的是来回滑动，而不仅仅是改变内容。我也希望能够用鼠标抓住它并向左或向右滑动，并在我滑动时改变内容。我也希望它在页面加载时自动播放，并在悬停时暂停。任何建议将不胜感激。谢谢！

Answer 1

JCarousel是一个简单的JQuery Slider插件 请检查以下链接 http://sorgalla.com/projects/jcarousel/examples/static_simple.html

Answer 2

使用 jQuery UI 我创建了：

jsBin demo

var $sl = $('#slider');
var slW = $sl.outerWidth(true);
var slN = $sl.children().length;
var c = 0;
var W = slW/slN;
$('#scroller, #nav_btns li').width(W);


function move(){
  c = c==-1 ? slN-1 : c%slN;
  $sl.stop().animate({scrollLeft: slW*c},1000);
  $('#scroller').stop().animate({left: W*c},500);
}

$('#prev, #next').click(function(e){
  var btn = this.id==='next'?c++:c--;
  move();
});

$('#nav_btns li').click(function(){
  c= $(this).index();
  move();
});

$("#scroller").draggable({
    containment:'parent',
    stop: function(){
        var stopPos = $(this).position().left;
        c = (Math.abs(stopPos/W).toFixed(0));
        move();
    }
});

<小时/> EDIT 添加了AUTOSLIDE 并改进了 red 可拖动滑块：

jsBin demo 2

Answer 3

让我稍微伪代码：你有一个带有幻灯片ID的数组......通过抓住条的总大小并除以数组的长度来找到条中的关键位置，具有大小每个项目占用可以通过相乘给你几个像素的位置（锚点）。现在你并排抓住滑块的总宽度，一些快速比例数学可以根据条形位置设置滑动包装器位置。使用自动滑动选项只需将锚点位置设置为另一个。