그냥 개발자 블로그

많은 슬라이드 배너 관련 플러그인들이 많으며, 이를 이용하는게 시간적인 측면에서도 효율적 입니다. 그러나 때때로 제작하는 사이트에 맞지 않아 직접 슬라이드 배너를 제작해야 할때가 있습니다. 많은 분들이 슬라이드 배너 직접 제작을 어려워 하십니다. 하지만 원리만 알고 자바스크립트 또는 제이쿼리를 다룰 능력이 된다면 이를 제작하는 방법은 쉽습니다. 이번 글에서 2017/08/18 - [IT] - [워크식스] 웹디자인기능사 실기 (좌로 흘러가는 슬라이드 편) 를 기준으로 슬라이드 배너 제작 원리를 그림을 통해 쉽게 알려드리겠습니다. 3개의 이미지가 있습니다.3개의 이미지를 div와 같은 엘리먼트로 감싸줍니다. 우리는 이를 컨테이너라고 하겠습니다. 그리고 컨테이너를 또 다시 div와 같은 엘리먼트로 감싸줍니다...

자동 또는 수동으로 동작 가능한 이미지슬라이드를 구현하게 해주는 플러그인 1. 제이쿼리 설치가 필요 합니다. 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 배너 레이아웃 및 스타일을 작성 합니다. 4. 페이지가 열릴때 플러그인 자동으로 실행될 수 있도록 함수를 작성 합니다. $(function(){ $('#banner1').slidebanner({ page:true, //페이지를 사용여부 설정 arrow:{left:'◀',right:'▶'}, //좌우 이동 사용 여부 및 버튼 모양 설정 auto:true, //배너를 자동으로 동작 여부 설정 speed:3000, //배너 변경시 속도 설정 delay:3000 //배너가 멈추어 있는 ..