// 캐러셀 컨테이너 요소에 대한 참조를 가져옵니다.
var carouselContainer = document.getElementById("carousel");

// Raphaël을 사용하여 캐러셀의 캔버스를 생성합니다.
var paper = Raphael(carouselContainer, "100%", "100%");

// 캐러셀 아이템의 배열을 정의합니다.
var items = [
  { text: "Item 1", color: "#ff0000" },
  { text: "Item 2", color: "#00ff00" },
  { text: "Item 3", color: "#0000ff" },
];

// 캐러셀 아이템을 그리는 함수를 정의합니다.
function drawItem(item, index) {
  var x = index * 100; // 각 아이템의 x 좌표 계산
  var y = 0; // y 좌표는 0으로 고정
  var width = 100; // 각 아이템의 너비
  var height = 100; // 각 아이템의 높이
  
  // 캐러셀 아이템을 그리는 Raphaël 사각형을 생성합니다.
  var rect = paper.rect(x, y, width, height);
  rect.attr("fill", item.color);
  
  // 아이템 텍스트를 추가합니다.
  var text = paper.text(x + width/2, y + height/2, item.text);
  text.attr("fill", "#ffffff");
  text.attr("font-size", "16px");
  text.attr("font-family", "Arial");
}

// 각 아이템을 순회하며 그립니다.
items.forEach(drawItem);