Javascript 圆形旋转木马，可在选定图像的两侧查看

是否有人设法创建/修改jcarousel、引导转盘或微型转盘，以便在初始化时除了主图像外，还能看到下一个和上一个图像的局部视图

---

*这是用于圆形旋转木马的

当然。诀窍是使视口小于可见区域，并将“溢出”设置为“隐藏”

在这个特定的实例中，我们使用了一些CSS渐变，使部分项也淡出

我将此处的

设置为每个155px：

li {
  height: 115px;
  padding: 0 0 0 20px;
  width: 155px;

然后剪辑区域不是155px的倍数，在这个例子中是700px。诀窍是在两边都设置非常大的边距！这会让你的额外物品溢出边缘

.jcarousel-clip {
  height: 115px;
  margin: 0 120px;
  overflow: hidden;
  width: 700px;

---

www.one.org/international/

找到了！我检查了每个元素。。。调整宽度。。。并设置一个负边距

我将不得不计算屏幕宽度和图像宽度，虽然在决定什么负边距插入。。。我想。。。（屏幕宽度-图像宽度）/2

=添加：始终高亮显示下一个控件或图像====

这样，在控制器中就不会选择部分隐藏的图像

function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
    var sel = parseInt($(item).find('img').attr('data-page'));
    if(sel == $('.jcarousel-control a').length) { 
        sel = 1;
    } else {
        sel += 1;
    }
    $('.jcarousel-control a').removeClass('selected');
    $('.jcarousel-control a:nth-child(' + sel + ')').addClass('selected')
};
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        var sel = parseInt(jQuery(this).attr('data-page'));
        sel -= 1;
        carousel.scroll(jQuery.jcarousel.intval(sel));
        return false;
    });
}

在init上的选项中：

initCallback: mycarousel_initCallback,
itemFirstInCallback:  mycarousel_itemFirstInCallback

---

我的旋转木马是100%的屏幕，主图像可能占90%的屏幕。。。所以它不能像你的例子那样居中。主图像（第一个）将真正分布在整个屏幕上，与第一个图像不同。像这样的我实际上需要显示（-1索引）图像。。。jcarousel所期望的是隐藏的，并且正在移动中更改。如果你有一个可以处理3个大图像的示例页面，那将是最有帮助的。原理保持不变。jCarousel将第0个图像设置在

.jCarousel clip

的开头，因此如果在

.jCarousel clip

上设置较大的左边距，您将看到-1索引图像：）您是对的！我想如果我在剪辑级别或容器级别设置负边距也没什么关系。。。。您是否有用于此场景的导航和选定导航的现有代码？棘手的部分是在控件上获取选定状态，默认情况下，选定状态将是（负）隐藏区域中的状态。。。

initCallback: mycarousel_initCallback,
itemFirstInCallback:  mycarousel_itemFirstInCallback