JQuery Slider 추천! bxSlider, 간단한 설치, 애니메이션까지

JQuery Slider 추천! bxSlider, 간단한 설치, 애니메이션까지

JQuery Slider를 사용하면 홈페이지나 티스토리 블로그를 이용할 때 방문하는 분들에게 더 좋은 UI를 제공할 수 있는데요. 이번에 다른 티스토리 블로그의 스킨을 변경하다가 좋은 JQuery Slider가 없을까 찾아보니 설치가 간단하고 다양한 기능을 지원해서 써 보았습니다.

JQuery Slider인 bxSlider를 제공하는 홈페이지에 접속해 보니 위와 같은 홈페이지가 나오더라구요. 위 화면에 보이는 것이 바로 bxSlider로 만든 Slider 화면입니다. 

제가 bxSlider를 알기 전에 다른 JQuery Slider도 찾아보았는데 각 JQuery Slider 마다 설치 방법은 각각 다릅니다.

위 홈페이지에서는 bxSlider를 설치하는 방법에 대해서 친절하게 안내해 주고 있는데요. 아래와 같이 몇 줄의 소스를 추가해 주는 것만으로도 bxSlider 설치를 할 수 있습니다. 

bxSlider 설치방법

아래의 Step1에서는 JQuery를 사용하기 위한 기본 라이브러리 파일과 bxSlider의 실행을 위한 자바스크립트(.js)파일과 스타일시트(.css)파일을 포함시켜 주는 부분입니다.

Step2에서는 bxSlider에서 실제로 보이는 이미지를 추가해주는 부분입니다. 아래와 같이 이미지의 경로를 추가해 주시면 됩니다.

Step3 에서는 홈페이지에서 bxSlider가 보여질 부분에 코드를 추가하여 홈페이지에서 bxSlider를 보여주도록 하는 소스코드입니다.

티스토리 블로그에서 skin.html의 수정을 통해 bxSlider를 사용할 수 있으니 티스토리 블로거 분들도 참고하시기 바랍니다^^

마지막으로 bxSlider의 홈페이지 주소를 알려드립니다. 

bxSlider 홈페이지 바로 가기 : http://bxslider.com/