부트스트랩 슬라이더 넷째, CAROUSEL 효과

이 글에서 설명할 부트스트랩 슬라이드는 마우스 클릭하여 다음 아이템으로 넘어가는 것이 아니라 스마트폰 등에서 손가락으로 좌우로 밀어 다음이나 이전 아이템으로 넘어가는 것이다. 참고로 이 글에 나오는 슬라이드도 마우스 클릭으로 다음이나 이전 아이템을 볼 수 있다.  

스마트폰에서 다음 아이템을 손가락으로 넘기는 것을 많이 했을 것이다. 미리보기는 아래에서 확인할 수 있는데 확인하려면 일반적으로 터치 스크린인 스마트폰이나 태블릿PC 등에서 봐야 한다. 그리고 페이지 로딩이 완전히 이루어지면 부드럽게 다음 아이템으로 넘어간다. 만약 로딩이 완전히 이루어지지 않는다면 손가락을 움직여도 다음으로 넘어가지 않는다.  

First slide

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide

Nulla vitae elit libero, a pharetra augue mollis interdum.

Third slide

Nulla vitae elit libero, a pharetra augue mollis interdum.

구글 검색에서 이것에 대해 검색하다가 이것은 하는 방법은 http://bootsnipp.com/snippets/VP798에서 알았다. 그리고 손가락으로 좌우로 미는 것을 영어 단어로 swipe라고 하는 것을 알았다. swipe라는 단어를 뜻을 알아보니 신용카드 등을 대다라는 뜻이 있는 것으로 손가락을 대서 아이템을 나오게 한다는 말인 것 같다.

그건 그렇고 여러 방법이 있었는데 나는 부트스트랩 3.3.4를 사용하므로 3.2.0인 http://bootsnipp.com/snippets/VP798의 소스를 사용하기로 했다. 그런데 그 소스를 사용하니 자꾸 모바일에서 로딩이 끝나면 효과가 나타나고 로딩 후에 페이지 위로 강제로 이동해 다른 소스를 찾았다. 이 블로그는 모바일에서 짜증나게 로딩이 느리다. 그래서 https://github.com/avinoamr/bootstrap-carousel-swipe 에서 제공하는 소스를 사용하기로 했다. 그 사이트에 나오듯 아래 그림과 같이 소스와 자바스크립트를 삽입하면 된다. 이 블로그에서 손가락으로 이동할 수 있는 carousel은 이 글에 있는 carousel과 맺음말에 있는 carousel이다. 참고로 소스에 bootstrap을 포함해야 한다.

손가락을 밀어서 다음이나 이전 아이템이 나타나게 하는 것은 이 블로그 하단에 있는 슬라이드도 해당한다. 위에서 적었듯 로딩이 안 마쳐졌다면 슬라이딩이 안 이루어진다. 나중에 시간이 있다면 카테고리 다른 글로 슬라이더로 만들고 싶다.

부트스트랩 3.0부터 PC가 아닌 모바일 우선이라고 하는데, 그럼 스크립트에 손가락으로 슬라이드되는 것을 포함됐어야 했다. 그럼 귀찮게 스크립트를 삽입할 필요 없을 것 같다. 부트스트랩 4.0 알파는 어떤지 모르겠다. 

아래 소스는 부트스트랩4의 캐러셀(Carousel)이다.

무료 팩스