圓形旋轉木馬與所選圖像兩側的視圖

Question

有沒有人設法創建/修改jcarousel，bootstrap carousel或tiny carousel以實現在初始化時除了主圖像之外的下一個和前一個圖像的局部視圖？

*這是一個圓形輪播

Answer 1

www.one.org/international/

找到了！我仔細檢查了每個元素...調整了寬度...並設置了負邊距。

我將不得不計算出屏幕的寬度和圖像的寬度雖然決定什麼樣的負面保證金插入之前......我會想象......（屏幕寬度 - 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; 
    }); 
} 

並在初始化選項：

initCallback: mycarousel_initCallback, 
itemFirstInCallback: mycarousel_itemFirstInCallback 

Answer 2

當然。訣竅是使視口小於可見區域，並將溢出設置爲隱藏。

在這個特定的實例中，我們使用了一些CSS漸變來使部分項目也淡出。

我這裏設置<li> s到每個155px：

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

然後剪輯區域的東西不是155px的倍數，在這種情況下700像素。那麼訣竅就是在雙方都設定真正的脂肪利潤！這會讓你的額外物品在邊緣流血。

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