javascript - 圆形旋转木马，在所选图像的两侧都有视图

Question

有没有人设法创建/修改 jcarousel、bootstrap carousel 或 tiny carousel 以实现在初始化时除了主图像之外的下一个和上一个图像的部分视图？

*这是一个圆形旋转木马

Answer 1

www.one.org/international/

找到了！我浏览了每个元素...调整了宽度...并设置了负边距。

在决定插入负边距之前，我必须计算屏幕宽度和图像宽度......我想......（屏幕宽度 - 图像宽度）/ 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>这里将 s 设置为 155px：

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

然后剪辑区域不是 155px 的倍数，在本例中为 700px。诀窍是在两边都设置非常大的边距！这将使您的额外物品溢出边缘。

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