이미지 슬라이드 MH Slide

에디터 컴포넌트 3탄입니다.😊

 

[ Ver 1.1 ~ 1.2 ] - 2026.07.27

• 파일 삭제 — PopUp 에서 이미지만 추가 시의 파일들이 게시글 삭제 시 파일들 삭제가 안되던 버그 수정

• 반응형 화면 전환시 이미지 사이즈 문제

- 반응형/모바일에서 그리드 전환효과가 화면 크기에 맞춰 정확히 스케일되도록 개선 (어긋남 없음)

- contain 모드에서 작은 이미지가 전환 중 크게 보였다가 끝나고 작아지는 현상 수정

- 팝업에 "반응형/모바일에서도 전환효과 사용" 옵션 추가

• 마우스 Hover시 정지

- 이미지에 마우스 오버(PC) / 터치(모바일) 시 자동 슬라이딩 정지, 벗어나면 재개

- 전환 애니메이션 도중 hover가 시작돼도 멈춤이 확실히 유지되도록 수정

 

[ Mh Slide 특징 ] - 2026.07.10

• 이미지 사이즈 - 원본 이미지의 가로·세로 비율이 일정한 이미지를 업로드하면 슬라이드가 더욱 깔끔하게 출력됩니다.

- 가로/세로 중 한쪽을 비워두면, 입력한 값을 기준으로 각 이미지의 원본 비율에 맞게 나머지 값이 자동으로 계산됩니다.  Sample

- 둘 다 비워두면 가로 100%(반응형)로 출력되며, 첫 번째 이미지의 비율에 맞춰 세로 높이가 자동 조정됩니다.

- 가로·세로 사이즈 둘 다 지정해 주어야 전환 효과가 작동을 합니다.

- 썸네일도 지정한 비율로 출력됩니다.

• 재생 옵션 - 자동 재생, 전환 효과 주기, 랜덤 재생, 썸네일 표시등을 선택 할 수 있습니다.

• 이미지 업로드 - 업로드 방식을 직접 PopUp 에서 추가하거나, 기존에 올려진 파일에서 선택 가능합니다.

- 파일 선택창에서 Shift(범위 선택) 또는 Ctrl(개별 선택, Mac은 Cmd) 키를 누른 채 여러 장을 한 번에 선택하면, 선택한 순서대로 모두 추가되어 순차적으로 업로드됩니다.

- 각 항목 좌측 상단의 ☰ 손잡이를 눌러 드래그하면 이미지 순서를 바꿀 수 있습니다.

- PopUp 에서 추가한 이미지도 에디터 안에 파일 첨부됩니다.

• 이미지 설명 - 각각의 이미지에 Caption를 달 수 있습니다.

 

다운받은 파일 압축을 풀어서 mh_zoom 폴더를 ./modules/editor/components/mh_slide 에 업로더하고

관리자 설정 에디터에서 항목 체크해 주면 됩니다.

 

그럼 게시판 글쓰기 항목에 "이미지 슬라이드" 추가됩니다.

 

이 곳에서는 샘플을 보여주기가 어렵고

링크 이곳에서 보세요