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

프로그래밍/자바스크립트 2018.04.12 23:08

홈페이지에 이미지를 바꿔가며 보여주는 이미지 슬라이더는 아주 많이 사용되는 아이템입니다. 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>

 

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

댓글을 달아 주세요

  • 나그네 2019.04.03 13:54  댓글주소  수정/삭제  댓글쓰기

    정보 감사합니다^^

  • 초보자 2019.05.09 13:50  댓글주소  수정/삭제  댓글쓰기

    슬라이드 이미지 따라서 공부하고 있는 초보자입니다!! 유용하게 잘 보고 공부중입니다 ! 감사합니다~
    그런데 질문하나 드려도 될까요!?
    똑같이 따라 만들었는데 얼추 움직이고 모양은 잡혔는데
    next버튼과 prev버튼을 누르면 순서대로 이동하지않고 뒤죽박죽 움직이더라구요,,,
    무슨이유 때문일까요..? 아무리 수정해봐도 안바뀌네요ㅠㅠ

    • pentode 2019.05.10 21:15 신고  댓글주소  수정/삭제

      이런 경우는 처음이네요. randomStart 옵션이 있어서 처음 보여질 이미지를 랜덤으로 보여주게 할 수는 있는데, 이전, 다음 버튼이 순서가 다르게 보이는 옵션은 본적이 없는것 같습니다. 첨부된 예제를 다운 받아 실행해 보시고, 자신이 만든것과 차이점을 비교해 보시는게 도움이 될것 같습니다. 성공하시길 바랄께요.

  • person 2019.06.13 09:53  댓글주소  수정/삭제  댓글쓰기

    이미지 위에 마우스 커서가 있을 때는 슬라이딩이 멈추게 하는 기능은 지원안되는 걸까요?

  • student 2019.06.14 17:17  댓글주소  수정/삭제  댓글쓰기

    pager true false해서 나오는 블릿을 슬라이더 내부로 이동시킬순없나요?

    • pentode 2019.06.14 17:38 신고  댓글주소  수정/삭제

      jquery.bxslider.css 파일내 아래 부분에서 위치를 지정하고 있습니다.

      .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
      position: absolute;
      bottom: -30px;
      width: 100%;
      }

      위 부분을 수정 하던지, 아니면 필요한 부분만 오버라이드 하면 되겠습니다.

  • kevin 2019.08.08 08:48  댓글주소  수정/삭제  댓글쓰기

    많은 정보 도움되었습니다. ^^
    혹시,
    http://www.joyzen.co.kr/
    이 사이트 처럼 구현을 하려면 어떻게 해야 할련지요 ?
    제가 2일을 팠지만 도저히 구현하기가 어려워 질문 올립니다.
    한마디 조언이라도 부탁드립니다.

    • pentode 2019.08.08 20:19 신고  댓글주소  수정/삭제

      글에 있는 내용 만으로도 구현할 수 있을것 같은데요.

      조금 다른 부분을 보면 좌우 컨트롤의 위치를 변경하려면 .bx-next { left: 500px; } 처럼 컨트롤의 스타일을 오버로드 하면 되겠습니다.

      슬라이더 위에 이미지 또는 <div> 같은 다른 요소를 올리려면, 올리려는 요소에 대해 .elem { position: absolute; top: 100px; left: 10px; } 처럼 위치를 지정해서 원하는 위치에 올리면 됩니다.

      성공하길 바랄께요.^^

  • 궁금함 2019.08.16 14:48  댓글주소  수정/삭제  댓글쓰기

    jquery.bxslider.css 파일내 아래 부분에서 위치를 지정하고 있습니다.

    .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
    }

    위 부분을 수정 하던지, 아니면 필요한 부분만 오버라이드 하면 되겠습니다.

    출처: https://offbyone.tistory.com/148 [쉬고 싶은 개발자]

    를 통해 불릿을 이미지 안쪽으로 옮기는건 가능한데 이미지 뒤편으로 숨어? 버리네요 ㅠㅠ 이미지 앞쪽에 불릿이
    보이게 하는 방법이 뭐가 있을까요

    • pentode 2019.08.16 21:54 신고  댓글주소  수정/삭제

      레이어들이 겹칠 경우 어느것이 위에 놓일지를 결정하는 스타일이 z-index 값입니다. 정수값을 가지며 숫자가 클수록 위쪽으로 올라옵니다. z-index를 적당히 조정해서 불릿이 위로 올라오도록 할 수 있습니다. 이미지의 z-index값이 50정도이네요. 불릿의 z-index값을 100정도로 설정해 보세요. 성공하시길 바랄께요.^^