섬네일 갤러리 구현 / Gallery with Thumbnail Slider / Swiper - Thumbs gallery
준비하기 CDN 연결 섬네일형 갤러리 생성을 위해 캐러셀 플러그인 코어 소스를 연결합니다. 본 글에서는 Swiper API 를 사용합니다. 아래 코드를 head 태그 사이에 붙여 넣어줍니다. 마크업하기 총 두 개의 swiper 마크업이 필요합니다. 이미지를 크게 보여줄 메인 슬라이드와 섬네일로 사용할 섬네일 슬라이드를 각각 마크업합니다. CSS 기본 코어 소스의 CSS 덕분에 사용하는 데에 크게 문제가 없지만, 원하는 디자인이 있다면 CSS를 추가해줍니다. .gallery-box{margin:0 auto;max-width:800px;} .gallery-box .gallery-main-box{padding:0 0 10px;} .gallery-box .gallery-main-box .swiper-slide ..