메뉴 건너뛰기

XEDITION

XE 공략

1.png 

 http://owlgraphic.com/owlcarousel/ 다운로드 Free

 

모바일에서 터치(그랩)로 화면이 좌우 슬라이드되면서 탭메뉴가 바뀌는 캐러젤을 한번 사용해 봐야겠다 생각만 하다가 이번 제 홈페이지 개편하면서 최근 포트폴리오 자리에 Owl Carousel을 설치했습니다. 

 

3.png 

www.designersol.co.kr

제 홈페이지(www.designersol.co.kr)의 브라우저 크기를 줄이거나 모바일로 접속하면 portfolio 섹션에서 확인할수 있습니다.

 

 

 

2.png 

Owl의 캐러젤을 약간 변형하여 하단의 페이지네이션을 상단으로 올리고 탭으로서 가능하게 내용을 넣으면 모바일 네이버와 같은 화면을 꾸밀수 있을거같아요.

 

설치방법 

1. http://owlgraphic.com/owlcarousel/#how-to 을 살펴보고 다운로드(http://owlgraphic.com/owlcarousel/) 하여 자신의 작업폴더에 아래의 파일을 복사합니다.

css

owl.carousel.css

owl.theme.css

 

js

jquery-1.9.1.min.js (jQuery 1.7이상)

owl.carousel.js

 

call js

  1. $(document).ready(function() {
  2.  
  3. $("#owl-example").owlCarousel();
  4.  
  5. });
 
 
4.png2. index.html을 브라우저로 열고 소스보기를 하여 해당 캐러젤의 최상위 태그를 선택해보면 추가적으로 캐러젤 예제를 위해 쓰여진 css가 두개 더 있습니다. (bootstrapTheme.css, custom.css) 일단 자신의 작업 프로젝트에서 정상적으로 작동되는지 살펴보기 위해 이 두개의 클래스도 함께 복사하기로합니다.

 

 

 5.png

3. 예제에 쓰인 이미지까지 모두 복사했습니다. owl-carousel.html은 실제 Owl 캐러젤에 쓰인 html만 따로 저장한것으로 아래 그림입니다.

 

 

6.png 

4. css, js의 경로를 자신에 맞게 변경하고 item을 감싸고 있는 최상위 div의 클래스도 자신의 작업에 맞게 변경합니다.

 

 

7.png 

5. 부라우저에서 확인

 

실제 자신의 작업에 추가할때는 bootstrapTheme.css, custom.css 파일 삭제,

캐러젤에 사용된 style만 (예를 들어 owl.theme.css에서는 캐러젤하단의 동그라미 페이지네이션 만) 카피하여 자신의 css에 추가하는 식으로 css를 관리하면 될것아요.

 

PS. 이 캐러젤이 반응형이 되려면 미디어쿼리가 들어있는 CSS가 링크되어 있어야 합니다.

 

출처 : http://www.designersol.co.kr/?mid=study&order_type=desc&category=450&document_srl=2438

 

출처 : http://www.cameron.co.kr/

번호 제목 글쓴이 날짜 조회 수
30 1.7X로 업글후 스케치북 웹진형 썸네일이 안나옵니다. 엘리후 2016.09.22 49
29 xe게시판에 외부이미지 가져와서 썸네일 만드는 팁 엘리후 2016.06.01 92
28 외부이미지 섬네일생성시 가로 1280px 넘어갈경우 생성되지않음 엘리후 2016.01.31 187
27 XE 요소 개발을 쉽고 빠르게 - XE Wizard 엘리후 2016.01.13 50
26 XE Core 1.4.4 새 템플릿 문법을 소개합니다. 간결+판독. 엘리후 2015.11.23 54
» 제이쿼리_모바일에서 터치(그랩)하는 캐러젤 설치하기 _ 모바일 엘리후 2015.08.25 174
24 XE 템플릿 문법의 이해 엘리후 2015.08.21 53
23 XE 회원가입 확장변수 출력 엘리후 2015.08.21 100
22 제로보드XE에 소셜XE(Social XE) 설정하여 소셜로그인 활용하기 엘리후 2015.08.21 164
21 구글 애드센스 계정 정지 후 대체 광고 종류 및 소개 엘리후 2015.08.21 421
20 구글 에드센스 이의 ( 논쟁) 엘리후 2015.08.21 100
19 구글애드센스 주소인증 엘리후 2015.08.05 173
18 제로보드 XE 홈페이지 만들기 - 제8장 게시판에 글과 영상 올리기 엘리후 2015.07.18 283
17 XE의 시작페이지 index.php 엘리후 2015.07.17 213
16 조건문 IF 엘리후 2015.07.17 110
15 파일 포함 include 엘리후 2015.07.17 131
14 기본 문법 default 엘리후 2015.07.16 162
13 XE 템플릿 문법의 이해 엘리후 2015.07.16 106
12 XE 레이아웃 바꾸기! 엘리후 2015.07.16 125
11 XE에 페이스북 소셜 댓글 연동하는 방법 (페이스북 소셜댓글 달기) 엘리후 2015.07.11 168
위로