caroufredsel酷轉盤51四象

Question

I want to use this script

但隨着4張圖片：

我找不到怎麼辦 我應該fredcarousel 使用什麼樣的選項，你可以參考我 ？

感謝

Answer 1

下面是這個carouFredsel例子是怎麼回事的細分：

作者指定每個元素的幻燈片中使用變量的位置：

var _center = { 
    width: 600, 
    height: 400, 
    marginLeft: 0, 
    marginTop: 0, 
    marginRight: 0 
}; 
var _left = { 
    width: 300, 
    height: 200, 
    marginLeft: 0, 
    marginTop: 150, 
    marginRight: -150 
}; 
var _right = { 
    width: 300, 
    height: 200, 
    marginLeft: -150, 
    marginTop: 150, 
    marginRight: 0 
}; 
var _outLeft = { 
    width: 150, 
    height: 100, 
    marginLeft: 150, 
    marginTop: 200, 
    marginRight: -200 
}; 
var _outRight = { 
    width: 150, 
    height: 100, 
    marginLeft: -200, 
    marginTop: 200, 
    marginRight: 50 
}; 

，然後使用carouFredSel啓動器自定義滾動行爲：

$('#carousel').carouFredSel({ 
    width: 900, 
    height: 400, 
    align: false, 
    items: { 
     visible: 3, 
     width: 100 
    }, 
    scroll: { 
     items: 1, 
     duration: 400, 
     onBefore: function(data) { 
      data.items.old.eq(0).animate(_outLeft); 
      data.items.visible.eq(0).animate(_left); 
      data.items.visible.eq(1).animate(_center); 
      data.items.visible.eq(2).animate(_right).css({ zIndex: 1 }); 
      data.items.visible.eq(2).next().css(_outRight).css({ zIndex: 0 }); 

      setTimeout(function() { 
       data.items.old.eq(0).css({ zIndex: 1 }); 
       data.items.visible.eq(0).css({ zIndex: 2 }); 
       data.items.visible.eq(1).css({ zIndex: 3 }); 
       data.items.visible.eq(2).css({ zIndex: 2 }); 
      }, 200); 
     } 
    } 
}); 

onBefore事件接收許多不同的參數，其中包含有關幻燈片的當前信息。在這種情況下，第一個參數是oldItems，然後使用先前設置的「位置」（var _center,var _left等），腳本爲要對應的項目設置動畫。 這些行然後在動畫之後設置幻燈片中元素的css & z-index。它允許幻燈片以更有效的方式基於它們的CSS屬性選擇元素。

$('#carousel').children().eq(0).css(_left).css({ zIndex: 2 }); 
$('#carousel').children().eq(1).css(_center).css({ zIndex: 3 }); 
$('#carousel').children().eq(2).css(_right).css({ zIndex: 2 }); 
$('#carousel').children().eq(3).css(_outRight).css({ zIndex: 1 }); 

要適應這4個元素，你需要在每個步驟中添加與定位第5變量和一個名稱，如_farRight並把它插入到腳本。