圆形旋转木马与所选图像两侧的视图

Question

有没有人设法创建/修改jcarousel，bootstrap carousel或tiny carousel以获得除了初始化主图像之外的下一张和上一张图像的局部视图？

*这是圆形转盘

Answer 1

www.one.org/international /

发现它！我浏览了每个元素......调整了宽度......并设置了一个负余量。

我必须在决定插入什么负边距之前计算屏幕宽度和图像宽度...我会想象......（screenwidth - imagewidth）/ 2.

.jcarousel-list {
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  top: 0;
  z-index: 1;
}

.jcarousel-container {
  margin-left: -258px; /*to be appended*/
  position:relative;
}

.jcarousel-clip {
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 2;
}

#carousel {
  background: url("../img/lines-hatches/cr-hatch-bl.gif") repeat-x scroll 0 100% transparent;
  height: 500px;
  overflow: hidden;
  padding: 20px 0 30px;
  width: 100%;
}

==== 添加：始终突出显示下一个控制或图像 ====

因此，控制器中未选择部分隐藏的图像。

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

Answer 2

不确定。诀窍是让视口小于可见区域，并将溢出设置为隐藏。

在这个特定的例子中，我们使用了一些CSS渐变来使部分项目也消失了。

我将<li>设置为每个155px：

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

然后剪辑区域不是155px的倍数，在这种情况下是700px。诀窍就是双方都设置了非常薄的利润！这会让你的额外物品流过边缘。

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