• 가이드

슬라이드 갤러리로 이미지 스크롤 효과내기

슬라이드 갤러리를 추가하고, 갤러리 설정에서 전환 대기시간을 조절해 이미지 스크롤 효과를 낼 수 있습니다.

설정방법

1단계: 갤러리 위젯 추가 및 이미지 추가하기

페이지에 갤러리 위젯을 삽입하고, 갤러리에 이미지를 추가하는 과정입니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  3. 갤러리 위젯을 클릭합니다.
  4. 갤러리 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나타나면 갤러리 설정을 클릭합니다.
  6. 갤러리 설정 창 왼쪽 상단 +동영상, 이미지 추가에 마우스 포인터를 올립니다.
  7. 이미지 추가를 클릭합니다.
  8. 내 PC에서 이미지들을 선택해 추가합니다. 아래 그림처럼 이미지들이 업로드됩니다.

    참고: 갤러리 위젯에 이미지를 업로드 하기 전 모든 이미지는 같은 비율로 통일해 제작해 주세요. 예를 들어, 4:1.5 비율로 이미지 비율을 통일하는 경우 모든 이미지 크기를 200x75픽셀로 제작합니다.

  9. 이미지 업로드가 끝나면 왼쪽 하단 갤러리 이름을 입력합니다.

2단계: 갤러리 디자인 설정하기

갤러리 스타일을 슬라이드 타입으로 변경하고, 전환 대기시간을 조절해 스크롤 효과를 적용하는 과정입니다.

  1. 갤러리 설정 창 상단의 디자인 탭을 클릭합니다.
  2. 다른 디자인 버튼을 클릭해 갤러리를 슬라이드 스타일로 변경합니다.

  3. 이미지 비율 옵션에서 비율을 4:1.5(BI, C Type)으로 변경합니다.
    참고: 이미지 비율은 위 1단계에서 업로드한 이미지들의 통일된 비율에 따라 달라질 수 있습니다.
  4. 리스트 항목의 옵션을 설정합니다.

    • 한줄 표시: 옵션에서 한 줄에 표시할 이미지 개수를 선택합니다.
    • 간격: 옵션에 이미지 간의 간격을 픽셀(px) 단위로 입력합니다.
    • 모바일 한줄 표시: 옵션에 모바일에서 한 줄에 표시될 이미지 개수를 선택합니다.
    • 라이트박스 사용 안함: 라이트박스 사용 안함을 선택합니다. 갤러리 이미지를 클릭해도 확대되지 않습니다.
  5. 옵션 항목의 옵션을 설정합니다.

    • 전환 속도: 전환 속도를 8초 정도로 입력해 슬라이드 시간을 늘려줍니다.
    • 전환 대기시간: 개별 이미지가 부드럽게 이동되도록 전환 대기시간을 0초로 입력합니다.
    • 자동 전환: 이 옵션을 선택하여 페이지 접속 시 자동으로 슬라이드가 시작되도록 설정합니다.
    • 반복: 이 옵션을 선택하여 갤러리 슬라이드가 계속해서 반복되도록 설정합니다.
  6. 갤러리 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
3단계: 미리보기 및 게시하기

미리보기를 통해 이미지 모양 및 스크롤 속도를 확인하고, 문제가 없다면 게시합니다.

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 갤러리 위젯 내 이미지가 정상적으로 표시되는지 확인합니다.
  3. 슬라이드 속도가 적절한지 확인합니다.
  4. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.
목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.
568.6K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
2.9K
전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 엑심베이 공식파트너입니다.