• 가이드

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

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

설정방법

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. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.
목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

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

아임웹에서 당신의 생각을 표현해보세요.

115.6K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

297

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

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