jQuery 제이쿼리 이미지 슬라이드 : bxslider 사용 방법

제이쿼리(jQuery)를 활용한 이미지 슬라이드 방법입니다. 엄청 쉽습니다. 자바스크립트를 잘 몰라도 됩니다. 저도 편리하게 이용하고 있습니다. 제이쿼리는 일종의 자바스크립트 꾸러미라고 생각하시면 좋을 것 같습니다. 그리고 수많은 능력자분들이 만든 제이쿼리 꾸러미 중 하나가 바로 오늘 소개해드릴 bxSlider 입니다.

BX슬라이더 공식 홈페이지

먼저 bxslider의 설치과정을 거쳐야 합니다. 하지만 설치라고해서 뭐 프로그램을 설치하는 과정이 아닌, html, javasctipt의 외부 링크를 추가하는 것 뿐입니다. 그래야 해당 링크의 주소에서 소스를 불러와 적용할 수 있기 때문입니다. 위에서 보시는 것 처럼 인스톨 버튼을 누르시면 해당 페이지로 이동하시게 됩니다.

두가지를 추가하시면 됩니다. HTML 내에서의 head 태그 안쪽에 (보통은 title 태그 아래에) 아래의 외부스타일 링크를 추가해 주시면 됩니다.

$(document).ready(function(){

$('.slider').bxSlider();

});

</script>

그리고 스크립트 부분도 추가해 주시면 됩니다. 마찬가지로 head 태그 안쪽에 배치해 주시면 됩니다.

위의 주소도 <head> 안쪽에 추가해 주시면 됩니다. 마지막으로 스크립트 부분에 실행문을 몇가지 넣어주시면 되는데, 이것은 bxslider 에서 제공하는 강력한 기능 중 하나입니다. 이렇게 사용하시면 됩니다.

$(document).ready(function () {

$('.bxslider').bxSlider({ // 클래스명 주의!

auto: true, // 자동으로 애니메이션 시작

speed: 500, // 애니메이션 속도

pause: 5000, // 애니메이션 유지 시간 (1000은 1초)

mode: 'horizontal', // 슬라이드 모드 ('fade', 'horizontal', 'vertical' 이 있음)

autoControls: true, // 시작 및 중지버튼 보여짐

pager: true, // 페이지 표시 보여짐

captions: true, // 이미지 위에 텍스트를 넣을 수 있음

});

가장 기본형태 입니다. 어떻게 나오는지 한번 살펴보도록 하겠습니다.

고양이1 cat1.png

고양이2 cat2.png

고양이3 cat3.png

여기에 고양이 사진을 사이즈를 동일하게하여 3개를 올려놓겠습니다. 저 사랑스러운 녀석들을 슬라이드를 진행하려고 합니다. 이미지 주소는 마우스로 오른쪽 버튼을 누르면 쉽게 얻을 수 있습니다. 그리고 html의 body 안쪽에는 ul과 li 태그를 활용해서 이미지를 넣어봤습니다.

<div>

</ul>

</div>

이런 형태로 들어오게 될 것입니다. 중요한 포인트는 ul에 class값을 부여했고, 클래스명은 bxslider 에서 제공하는 자바스크립트 클래스명과 동일해야 한다는 것 입니다. 저 위에 클래스명 주의라고 표시해둔 주석 처리된 부분입니다.

See the Pen bxslider by rgy0409 (@rgy0409) on CodePen.

이렇게 하여 완성된 bxslider의 모습 입니다. 이미지를 조금 작은것을 써서 여백이 좀 보이는데 대부분 슬라이드 이미지는 크니까 큰 이미지를 사용하시면 알아서 맞게 배치가 될 것입니다. 끝.