슬라이더 플러그인

jQuery

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

홈페이지 : https://bxslider.com/
GitHub : https://github.com/stevenwanderski/bxslider-4

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

1 기본 사용법
2 옵션 사용법
3 여러 슬라이드 동시에 보이기
4 캡션 넣기
5 텍스트 슬라이더

기본 사용법

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>

jQuery

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 / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

.offset() .offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다. 문법 1 .offset() 선택한 요소의 좌표를 가져옵니다. 예를 들어 var jb = $( 'h1' ).offset(); 는 h1 요소의 좌표를 변수 jb에 저장합니다. 문법 2 .offset( coordinates ) 선택한 요소를 특정 위치로 이동시킵니다. 예를 들어 $( 'h1' ).offset( { left: 100, top: 50 } ); 은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 ...

jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

jQuery를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두 가지로 구분할 수 있습니다. 다른 라이브러리와 충돌 다른 버전의 jQuery와 충돌 각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다. 다른 라이브러리와 충돌 jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다. 이를 방지하는 방법은 ...

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 / Method / .append() - 선택한 요소의 내용의 끝에 콘텐트를 추가하는 메서드

.append() .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).append( ' 123' ); 라고 하면 <p>Lorem Ipsum Dolor 123</p> 으로 출력됩니다. 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드

.unwrap() .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 $( 'h1' ).unwrap(); 은 h1 요소의 바로 상위의 태그를 제거합니다. 예제 1 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

.removeAttr() .removeAttr()은 선택한 요소의 특정 속성을 제거한다. 문법 attributeName 속성을 제거한다. .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거한다. $( 'h1' ).removeAttr( 'title' ); 예제 input 요소의 placeholder 속성을 제거한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> input { font-size: ...

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다. HTML 문서에 ...

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다. GitHub : https://github.com/kswedberg/jquery-smooth-scroll Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } p { margin-bottom: 800px; } </style> </head> <body> <ul> <li><a href="#ipsum">Ipsum</a></li> <li><a href="#dolor">Dolor</a></li> </ul> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, ...

jQuery / Method / .html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.html() .html()은 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .text()와 비슷하지만 태그의 처리가 다릅니다. 문법 1 .html() HTML 태그를 포함하여 선택한 요소 안의 내용을 가져옵니다. 예를 들어 var jb = $( 'h1' ).html(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .html( htmlString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...

CODING FACTORY