https://jsfiddle.net/minsupkr/u5d2t6q1/17/  

10월 초중순을 목표로 테마 개발 작업을 진행 중입니다. (광고 맞음, 그러나 안 팔리뮤ㅠ)

모바일에 스와이프탭(?) 이걸 뭐라 그래야 되나요.

암튼 요즘 모바일에서 거의 기본으로 쓰이는 스와이프탭 구현을 시도했는데...  

(SIR 모바일 베타에도 스와이프 방식 메뉴가 쓰였죠?)

이미 나와 있는 플러그인 이용하면 금방 될 줄 알았는데 의외로 사용성이나

자잘한 버그들이 많아서 (라고 쓰고 실력이 딸려서) 어제만 거의 10시간 삽질했네요.

SWIPER http://idangero.us/swiper/#.WcB06shJZjE

OWL CAROUSEL 2 https://owlcarousel2.github.io/OwlCarousel2/index.html

두 개 플러그인을 이용해서 구현했구요.

플러그인 한 개로 탭+컨텐츠 영역을 구성하면 이상하게 사용성에 문제가 하나씩 있더군요.

SLICK (slider syncing) 도 시도해봤는데 얘는 원하는 움직임이 아니고...

암튼 그렇게 삽질 오질라게 한 끝에 SWIPER+OWL CAROUSEL 로 만들어야겠다고 결론 내리고,

또 삽질 한참 해서 겨우겨우 구현을 끝냈는데...

이게 또 두 세트부터는 동작이 안 되더라구요. ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

(꼭 실행이 안 되야만 속이 후련했---냐!!!)

물론 쓸때마다 JS 소스를 추가하면 몇 세트라도 쓸 수는 있지만,

우린 또 그런 거 싫어하잖아요.

그래서 JS 소스를 추가하지 않고 HTML만 추가해서  

다수 스와이프탭을 한 페이지에 구현하는 부분에서 한참 삽질하고...

영캇 실제 적용하면서 또 삽질하고...

어제 겨우 완성하고 잠들었다가 오늘 일어나서 혹시 꿈은 아니겠지 하고 실행해보고

잘 되길래 괜히 혼자 으쓱해서... (그렇습니다. 저 이런 걸로 으쓱하는 수준입니다ㅠㅠ)

한 글 남겨봅니다. 히힛

$i++

사실 SWIPER 부분은 a 가 아니고 button 을 써야 적절한데 URLHash를 편하게 적용하려다보니 손을 못 댔네요. 실제 테마 출시 때는 바뀔랑가 모르겠습니다. 히힛

$i++ 

​Owl Carousel 2 의 URLHash 를 이용한 방법이었는데 뒤로가기 시 열람한 탭을 모두 거쳐야 되는 문제점이 있었네요. URLHash 제거하고 index 로 처리방법을 변경했는데 jsfiddle 에는 업데이트 하지 않습니다. ㅠㅠ

$i++ 

swiper + swiper 는 탭 부분에 클래스가 제대로 안 들어가고,

owl + owl 은 드래그(스와이프) 이벤트 시 (아마도) 드래그 시작지점 클릭이 한 번에 안되는 문제점이 있었습니다.

$i++

@gilynh 님 댓글 보고 싹 지우고 owl+owl 로 처음부터 다시 찬찬히 구현해봤는데 잘 되네요.

처음에 발생했던 사용성 문제는 아마 접근을 잘못 했던 것 같습니다.

$i++

owl 2 에 버그가 있는 것 같네요. (잘 안 되면 플러그인탓ㅋ)

일단 다시 swiper+owl 로... ㅠㅠ