이미지 슬라이더 - bxSlider 사용법

홈페이지에 이미지를 바꿔가며 보여주는 이미지 슬라이더는 아주 많이 사용되는 아이템입니다. bxSlider는 자주사용되는 기능도 거의 지원하고, 요즘 핫한 반응형도 지원하고, MIT 라이센스로 배포되므로 부담없이 무료로 사용할 수 있습니다.

 

bxSlider 의 타이틀이 반응형 jQuery 컨텐츠 슬라이더(The Responsive jQuery Content Slider) 인 것에서 알 수 있듯이 bxSlider는 jQuery 플러그인으로 작성되어 있습니다. 필요하다면 소스를 직접 수정하거나 기능을 확장하는 것도 그렇게 어렵지 않습니다.

 

또한 이미지를 바꿔가며 보여주는것 뿐만아니라 웹 페이지상에 보여지는 어떤 요소든지 바꿔가며 보여줄 수 있습니다. 그러니까 컨텐츠 슬라이더라고 하는것 같습니다.

 

다음 사이트에서 다운로드 받을 수 있습니다. 파일은 jquery.bxSlider.zip 입니다.

 

http://bxslider.com/

 

 

 

1. 기본 사용법

슬라이더 실행이 필요한 외부 파일을 불러옵니다. 

* jquery.bxslider.css : 슬라이더 스타일 시트 파일, 실제 사용시에는 용량을 줄인 jquery.bxslider.min.css 를 사용하는게 좋습니다.

* jQuery 파일 : 여기서는 CDN을 사용해서 포함시키고 있으며 1.8.2 버전은 사용합니다.  IE10 이상만 지원한다면 최신 버전을 사용해도 문제가 없겠습니다.

* jquery.bxslider.js : bxSlider 본체 입니다. 역시 실 사용에서는 용량을 줄인 jquery.bxslider.min.js 를 사용하는게 좋겠습니다.

 

<link href="jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.bxslider/jquery.bxslider.js"></script>

 

슬라이더가 될 컨텐츠 부분입니다.

 

<ul class="bxslider">
	<li><img src="images/img01.jpg" /></li>
	<li><img src="images/img02.jpg" /></li>
	<li><img src="images/img03.jpg" /></li>
</ul>

 

슬라이더를 생성하는 부분입니다.

 

<script type="text/javascript">
//<![CDATA[
	$(document).ready(function(){
	$('.bxslider').bxSlider();
});
//]]>
</script>

 

실행결과 입니다. 기본 코드는 이전, 다음 이동컨트롤과 각 페이지 이동 컨트롤이 기본 제공되고 자동으로 회전하지는 않습니다.

 

 

생성하는 코드 $('.bxslider').bxSlider();의 형태를 보면 jQuery 플러그인으로 만들어 졌다는 것은 알 수 있습니다. class="bxslider" 인 모든 요소를 슬라이더로 만듭니다. id 속성을 사용해서 중복되지 않는 여러개의 슬라이더를 만들 수 도 있습니다. $('#bxslider1').bxslider(); 처럼 사용이 되겠습니다.

 

 

2. 자주 사용되는 옵션 적용

 

$(document).ready(function(){
	$('.bxslider').bxSlider({
		auto: true,
		speed: 500,
		pause: 4000,
		mode:'fade',
		autoControls: true,
		pager:true,
	});
});

 

결과 입니다.

 

 

* auto: true - 이미지 회전이 자동으로 시작합니다.

* speed: 500 - 이미지가 다음 이미지로 바뀌는데 걸리는 시간입니다. 단위는 ms(mili seconds) 입니다. 500 ms가 기본값 입니다.

* pause: 4000 - 하나의 이미지가 멈춰서 보여지는 시간입니다. 4000ms 가 기본값입니다.

* mode 'fade' - 이미지가 교체되는 방식입니다. 'fade', 'horizontal', 'vertical' 을 사용할 수 있습니다. 각각 fade in/fade out, 수평 스크롤, 수직 스크롤 방식으로 이미지가 교체됩니다.

* autoControls: true - 시작 중지 버튼을 보여지게 합니다.

* pager: true - 페이지 바로가기 버튼을 보여지게 합니다.

 

 

 

3. 이미지위에 텍스트 올리기

이미지 위에 텍스트를 올리기 위해서는 두가지 방법이 있습니다.

 

첫 번째는 bxSlider 가 자체적으로 지원해주는 캡션 기능을 사용하는 것입니다.

 

$('.bxslider').bxSlider({
	mode: 'fade',
	captions: true
});

<ul class="bxslider">
	<li><img src="images/img01.jpg" title="캡션을 지정할 수 있습니다." /></li>
<ul>

 

captions 옵션을 true로 하면 이미지의 title속성값이 이미지 하단에 캡션으로 보여집니다.

 

 

두 번째 방법은 <li> 요소내의 이미지에 겹치도록 텍스트 컨텐츠를 추가하는 것입니다.

 

<li>
	<div style="position:absolute;"><h1>두 번째 이미지</h1></div>
	<img src="images/img01.jpg" />
</li>

 

텍스트를 포함하고 있는 <div> 요소의 스타일에 position:absolute 로 지정하여 이미지 위에 표시되도록 하였습 니다. top, left, right, bottom 등을 사용하여 위치를 지정할 수 있습니다.

 

 

 

4. 컨트롤 위치, 모양 변경하기

 

컨트롤(이전, 다음, 시작, 중지 등)의 위치나 모양을 변경하기 위해서는 jquery.bxslider.css를 직접 수정하거나 관계된 스타일을 오버라이드 하면 됩니다. 슬라이더가 생성된 후의 DOM 구조는 다음과 같습니다.

 

<div class="bx-wrapper">
	<div class="bx-viewport">
		<ul class="bxslider">
			<li><img src="images/img01.jpg" /></li>
		</ul>
	</div>
	<div class="bx-controls bx-has-controls-direction bx-has-controls-auto bx-has-pager">
		<div class="bx-controls-direction">
			<a class="bx-prev">Prev</a>
			<a class="bx-next">Next</a>
		</div>
		<div class="bx-controls-auto">
			<div class="bx-controls-auto-item">
				<a class="bx-start">Start</a>
			</div>
			<div class="bx-controls-auto-item">
				<a class="bx-stop">Stop</a>
			</div>
		</div>
		<div class="bx-pager bx-default-pager">
			<div class="bx-pager-item">
				<a class="bx-pager-link" data-slide-index="0">1</a>
			</div>
		</div>
	</div>
</div>

 

 

5. 반응형으로 사용시 문제점

 

반응형웹에서 bxSlider 를 사용할때 화면 크기에 따라 슬라이더 자체를 감췄다가 보여주는 경우 슬라이더가 다시 표시되지 않는 경우가 있습니다. 이때는 bxSlider의 reloadSlider(); 메소드를 호출해 주면 다시 보여집니다.

 

$(document).ready(function() {
	var slider = $('.bxslider').bxSlider();

	var mql = window.matchMedia("screen and (max-width: 768px)");
	mql.addListener(function(e) {
		if(!e.matches) {
			slider.reloadSlider();
		}
	});
});

 

이 예에서는 window.matchMedia(); 를 사용해서 특정 화면 크기에서 다시 보여질 때 reloadSlider(); 를 호출 하도록 한 코드 입니다.

 

 

지금까지 bxSlider를 자주 사용하는 옵션들 위주로 간단히 알아 보았습니다. 앞의 예에서는 한번에 하나의 이미지를 보여주고 슬라이드 하는 것이었습니다. bxSlider는 한번에 여러장의 이미지를 보여주도록 설정하는 것도 가능합니다. 보통 페이지 하단에 여러개의 배너 이미지들이 스크롤되는 것과 같은 기능도 구현이 가능합니다. 다음 URL에서 더욱 많은 샘플들과 사용할 수 있는 옵션들을 찾을 수 있습니다.

 

Examples : http://bxslider.com/examples

Options : http://bxslider.com/options

 

※ 예제소스

bxslider.zip

다운로드

 

 

• 
• 
• 
• 

 

※ 추가

행복한 안경사님이 티스토리 블로그에 bxSlider를 넣는 방법을 문의해 주셨습니다. 별로 어렵지 않을 것이라고 생각하고 해 보았는데 생각보다 까다롭고 문제가 있었습니다.

 

첫 번째는 제가 쓰고있는 티스토리 블로그의 스킨에 이미 두 가지 버전의 jqery 가 사용되고 있었습니다. jquery-3.2.1 버전과 jquery-1.11.3 버전입니다. 글에서 만들 샘플은 jquery-1.8.2 버전은 사용하고 있었습니다. 사실 버전이 문제가 아니고, 서로 다른 버전이 여러개 사용되고 있다는 것이 문제입니다.

 

두 번째는 HTML/CSS 편집에서 필요한 파일을 업로드 하는데, 폴더를 생성할 수 가 없다는 것이었습니다. 모두 images 폴더에 들어가 버립니다. jquery.bxslider.css 파일에서 컨트롤 이미지로 images 폴더 아래에 bx_loader.gif, controls.png 파일을 사용합니다.

 

이런 상황을 고려해서 예제를 수정해서 bxslider 를 적용해보았습니다.

 

1. jquery.bxslider.css 파일내의 이미지를 지정하는 부분에서 images 폴더지정 부분을 제거합니다.

 

아래 처럼 images/ 부분을 모두 찾아 지우면 됩니다.

 

background: url('images/controls.png') -86px -44px no-repeat;

background: url('controls.png') -86px -44px no-repeat;

 

2. HTML/CSS 편집에서 bx_loader.gif, controls.png, jquery.bxslider.css, jquery.bxslider.js 네개의 파일을 업로드 합니다. 모두 동일하게 images 폴더에 올라가게 됩니다.

 

3. 글 작성 또는 수정에서 슬라이더에 사용할 이미지를 업로드 합니다.(일단 페이지에 삽입해 두고 HTML 보기에서 필요한 부분만 잘라서 작성하면 됩니다.) 물론 스킨 폴더에 올려도 됩니다. 스킨 폴더의 용량은 20MB 이었습니다.

 

4. jQuery 부분은 $.noConflict() 를 사용해서 충돌이 일어나지 않도록 수정합니다.

 

<div style="max-width:800px;text-align:center;">
<ul class="bxslider">
	<li>업로드한 이미지 또는 스킨폴더의 이미지</li>
</ul>
</div>
<link href="자신의 스킨폴더 위치/images/jquery.bxslider.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="자신의 스킨폴더 위치/images/jquery.bxslider.js"></script>
<script type="text/javascript">
//<![CDATA[
var jQ182 = $.noConflict(true);
jQ182(document).ready(function(){
	jQ182('.bxslider').bxSlider({
		auto: true,
		speed: 500,
		pause: 4000,
		mode:'fade',
		autoControls: true,
		pager: true,
	});
});
//]]>
</script>

 

이렇게 하면 동작은 하는데, 이미지 전환 애니메이션이 깔끔하지 못하네요. 페이지에 업로드한 이미지를 사용해서 그런게 아닌지 모르겠습니다. 스킨폴더에 업로드한 이미지로도 테스트 해보아야 할것 같습니다.