jQuery / Plugin / bxSlider / 슬라이더 플러그인

bxSlider는 jQuery 기반의 슬라이더 플러그인입니다.

홈페이지의 예제는 단순하지만, 옵션을 이용하여 다양한 활용이 가능합니다.

기본 사용법

  • jQuery, jquery.bxslider.min.js, jquery.bxslider.css를 연결합니다.
  • 다음은 CDN을 이용하여 연결하는 코드입니다.
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  • 다음과 같은 형식으로 마크업합니다.
  • 클래스 값인 slider는 변경해도 됩니다.
<div class="slider">
  <div><img src="images/slider-01.jpg" alt=""></div>
  <div><img src="images/slider-02.jpg" alt=""></div>
  <div><img src="images/slider-03.jpg" alt=""></div>
  <div><img src="images/slider-04.jpg" alt=""></div>
  <div><img src="images/slider-05.jpg" alt=""></div>
</div>
  • 위에서 정한 클래스 값을 선택자로 하여 슬라이더를 실행합니다.
<script>
  $( document ).ready( function() {
    $( '.slider' ).bxSlider();
  } );
</script>
  • 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>bxSlider</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <script>
      $( document ).ready( function() {
        $( '.slider' ).bxSlider();
      } );
    </script>
  </head>
  <body>
    <div class="slider">
      <div><img src="images/slider-01.jpg" alt=""></div>
      <div><img src="images/slider-02.jpg" alt=""></div>
      <div><img src="images/slider-03.jpg" alt=""></div>
      <div><img src="images/slider-04.jpg" alt=""></div>
      <div><img src="images/slider-05.jpg" alt=""></div>
    </div>
  </body>
</html>
  • 실행 결과는 다음과 같습니다.
  • 이미지 좌우의 화살표, 이미지 하단의 동그라미를 클릭하면...

  • 이미지가 바뀝니다.

옵션 사용법

  • 사용할 수 있는 옵션은 https://bxslider.com/options/에 설명되어 있습니다.
  • 옵션은 다음과 같은 형식으로 넣습니다.
<script>
  $( document ).ready( function() {
    $( '.slider' ).bxSlider( {
      optionName1: value1,
      optionName2: value2,
    } );
  } );
</script>
  • 아래는 1초 마다 자동으로 이미지가 바뀌도록 한 것입니다.
<script>
  $( document ).ready( function() {
    $( '.slider' ).bxSlider( {
      auto: true,
      pause: 1000,
    } );
  } );
</script>

여러 슬라이드 동시에 보이기

아래는 세 개의 슬라이드가 한 번에 보이는 슬라이더입니다.

  • auto: true
    슬라이더 전환이 자동으로 시작
  • pause: 1000
  • 1초 마다 슬라이더 전환
  • autoHover: true
    마우스 올렸을 때 전환 멈춤
  • minSlides: 3
    최소 슬라이더 수
  • maxSlides: 3
    최대 슬라이더 수
  • slideWidth: 800
    이미지 가로 크기 800px, minSliders가 설정되어 있으면 그 수만큼 나오도록 가로폭 조정
  • slideMargin: 5
    슬라이더 가로 간격 5px
<script>
  $( document ).ready( function() {
    $( '.slider' ).bxSlider( {
      auto: true,
      pause: 1000,
      autoHover: true,
      minSlides: 3,
      maxSlides: 3,
      slideWidth: 800,
      slideMargin: 5,
    } );
  } );
</script>

캡션 넣기

  • captions: true
    이미지의 title 속성의 값이 캡션으로 출력됩니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>bxSlider</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <script>
      $( document ).ready( function() {
        $( '.slider' ).bxSlider( {
          auto: true,
          pause: 1000,
          autoHover: true,
          minSlides: 3,
          maxSlides: 3,
          slideWidth: 800,
          slideMargin: 5,
          captions: true,
        } );
      } );
    </script>
  </head>
  <body>
    <div class="slider">
      <div><img src="images/slider-01.jpg" alt="" title="Slider 01"></div>
      <div><img src="images/slider-02.jpg" alt="" title="Slider 02"></div>
      <div><img src="images/slider-03.jpg" alt="" title="Slider 03"></div>
      <div><img src="images/slider-04.jpg" alt="" title="Slider 04"></div>
      <div><img src="images/slider-05.jpg" alt="" title="Slider 05"></div>
    </div>
  </body>
</html>

텍스트 슬라이더

이미지 외에 다른 것도 슬라이드로 넣을 수 있습니다. 아래는 텍스트로 만든 슬라이더 예제입니다.

  • controls: false
    좌우 화살표를 출력하지 않습니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>bxSlider</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <script>
      $( document ).ready( function() {
        $( '.slider' ).bxSlider( {
          auto: true,
          pause: 1000,
          autoHover: true,
          minSlides: 3,
          maxSlides: 3,
          slideWidth: 800,
          slideMargin: 5,
          controls: false,
        } );
      } );
    </script>
    <style>
      .slider div {
        border: 5px solid #dadada;
        background-color: #fafafa;
        padding: 100px 0px;
        text-align: center;
        font-family: Consolas;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="slider">
      <div>Text Slider 01</div>
      <div>Text Slider 02</div>
      <div>Text Slider 03</div>
      <div>Text Slider 04</div>
      <div>Text Slider 05</div>
      <div>Text Slider 06</div>
    </div>
  </body>
</html>

Related Posts

jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드

.attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가합니다. 문법 1 .attr( attributeName ) 선택한 요소의 속성의 값을 가져옵니다. 예를 들어 $( 'div' ).attr( 'class' ); 는 div 요소의 class 속성의 값을 가져옵니다. 문법 2 .attr( attributeName, value ) 선택한 요소에 속성을 추가합니다. 예를 들어 $( 'h1' ).attr( 'title', 'Hello' ); 는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다. 예제 1 h1 요소의 ...

jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드

jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드

.has() .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 $( 'h1' ).has( 'span' ) 은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드

jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드

.hide() .hide()는 선택한 요소를 사라지게 합니다. 문법 1 .hide() 선택한 요소를 즉시 사라지게 합니다. 문법 2 .hide( duration ) duration : 사라지는 데 걸리는 시간입니다. slow, fast, 숫자를 넣을 수 있습니다. 숫자의 단위는 1000분의 1초입니다. 기본값은 400입니다. easing : 사라지는 방식입니다. swing과 linear가 가능합니다. 기본값은 swing입니다. complete : 사라진 다음 실행할 함수를 넣을 ...

jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드

jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드

.prop() .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다. 문법 1 .prop( propertyName ) 속성값을 가져옵니다. 문법 2 .prop( propertyName, value ) 속성값을 추가합니다. 예제 1 a 요소의 href 속성값을 .attr()과 .prop()로 가져와서 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드

.empty() .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다. 문법 .empty() 예를 들어 <h1>Lorem</h1> 일 때 $( 'h1' ).empty() 를 하면 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / .ajax() / 동기식으로 사용하는 방법

jQuery / .ajax() / 동기식으로 사용하는 방법

Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.before() .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다. 문법 .before( content ) 예를 들어 $( 'h1' ).before( '<p>Hello</p>' ); 는 h1 요소 앞에 Hello를 내용으로 갖는 p 요소를 추가합니다. $( 'h1.a' ).before( $( 'p.b' ) ); 는 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 ...

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

.find() .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 $( 'h1' ).find( 'span' ) 은 h1 요소의 하위 요소 중 span 요소를 선택합니다. 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...