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 / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

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

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

jQuery / meta 태그의 값 가져오기

jQuery / meta 태그의 값 가져오기

jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다. $( 'meta' ).attr( 'content' ); meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <meta name="author" content="JB"> <meta property="og:image" content="abc.png"> ...

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

.appendTo() .appendTo()는 선택한 요소를 다른 요소 안에 넣습니다. 문법 .appendTo( target ) 예를 들어 $( 'p' ).appendTo( 'blockquote' ); 는 p 요소를 blockquote 요소 안으로 이동시킵니다. 예제 abc를 클래스 값으로 가지는 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 / .slice() - 일치하는 요소의 일부분만 선택하는 메서드

jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드

.slice() .slice()는 일치하는 요소의 일부분만 선택합니다. 문법 .slice( start ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만듭니다. $( 'li' ).slice( 2, 5 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 5번째까지 빨간색으로 만듭니다. $( 'li' ).slice( -4, -2 ).css( 'color', 'red' ); 는 li 요소 중 ...

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 / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

.fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다. 문법 .fadeIn( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...

jQuery / Plugin / 유용한 플러그인 모음

jQuery / Plugin / 유용한 플러그인 모음

Slider bxSlider slick Uncategorized Smooth Scroll : 한 페이지에 있는 링크 사이를 부드럽게 이동하게 해주는 플러그인 jQuery Actual : 보이지 않는 요소의 크기를 가져오는 플러그인 vTicker : 아래에서 위로 스크롤되는 티커

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 메서드

jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 메서드

.css() .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가합니다. 문법 1 .css( propertyName ) 속성값을 가져옵니다. 예를 들어 $( "h1" ).css( "color" ); 는 h1 요소의 스타일 중 color 속성의 값을 가져옵니다. 문법 2 .css( propertyName, value ) style 속성을 추가합니다. 예를 들어 $( "h1" ).css( "color", "green" ); 는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 바꿉니다. <h1 style="color: green;">...</h1> 예제 1 h1 ...

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

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

bxSlider는 jQuery 기반의 슬라이더 플러그인입니다. 홈페이지 : https://bxslider.com/ GitHub : https://github.com/stevenwanderski/bxslider-4 홈페이지의 예제는 단순하지만, 옵션을 이용하여 다양한 활용이 가능합니다. 기본 사용법 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 ...