캐러셀 연동 가이드

Carousel

캐러셀 만들기

캐러셀을 내 프로젝트에 통합하기

이미지 링크 생성기

이미지 업로드 하기

링크 영역 추가하기

링크 영역에 URL 추가하기

이미지 URL을 포함한 HTML 생성하기

캐러셀을 내 프로젝트에 통합하기

이 가이드는 Cloma.io에서 생성한 캐러셀을 프로젝트에 임베드하는 방법을 설명합니다.
계속 진행하기 전에 캐러셀을 생성하고 콘텐츠를 추가했는지 확인하세요. 이 과정은 캐러셀 만들기 가이드를 참고해주세요.

1️⃣ 스크립트 태그 추가

다음 스크립트를 <head/> 섹션 또는 </body/> 태그 직전에 추가하세요:

<head>
  ...
+ <script src="https://cloma.io/cdn/carousel/web/0.3.2/c-carousel.min.js" data-carousel-key="{YOUR_CAROUSEL_KEY}"></script>
</head>

2️⃣ 캐러셀 루트 요소 삽입

캐러셀이 나타나길 원하는 위치에 다음 요소를 추가하세요:

+ <div id="cloma-carousel-root"></div>

⚠️ 참고사항

data-carousel-key는 Cloma.io에서 발급받은 고유한 키로 교체해야 합니다.
최상의 성능을 위해 스크립트 태그는 </body> 태그 직전에 두는 것을 권장합니다.

예시: 전체 HTML 통합

아래는 HTML 예시입니다. 이 코드를 참고하여 여러분의 웹 프로젝트에 캐러셀을 통합해보세요. 💡 아래 코드 블록을 클릭하면 새 창이 열리고, 그 창에서 캐러셀을 바로 확인할 수 있습니다. ⚠️ 오늘 하루 보지 않기를 클릭하면 당일 동안 캐러셀이 다시 열리지 않습니다. 다시 확인하려면 브라우저의 로컬 스토리지를 초기화하세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fun Carousel Example</title>
    <script src="https://cloma.io/cdn/carousel/web/0.3.2/c-carousel.min.js" data-carousel-key="kr8NiCZdzZ"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            margin: 1.5rem;
            padding: 0 1rem;
            text-align: center;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Integrate the carousel into your project!</h1>
    <div id="cloma-carousel-root"></div>
</body>
</html>