[코딩 공부_97] bx slider 사용하기

slick 슬라이더 다음으로 내가 자주 사용하는 bx slider! 

정말 방법이 쉬워서 쓴다 ㅎㅎ

 

아래 링크는 bx slider 사이트이다 클릭 후, click here to install을 클릭하면 1-3번 코드가 나타나는데 그걸 복사 붙여넣기만해도 완성이다 ㅎㅎ

 

jQuery Content Slider | Responsive jQuery Slider | bxSlider

 

1. bx slider 링크 삽입하기 (head 안에 넣기!)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

 

2. html 작성하기

  <div class="slider">
    <div>I am a slide.</div>
    <div>I am another slide.</div>
  </div>

 

3. script 작성하기(html 코드 작성 후, 바로 밑에 삽입!(=끝나는 body태그 바로 위에!)

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider();
    });
  </script>

 

이렇게 삽입하면!!

기본적인 bx slider 형태를 갖출 수 있다

나머지 꾸미는 일은 개발자도구를 이용해서 그룹을 찾아 해주면 된다!! 

 

너무 쉬운 사용법이여서 행복하다 !ㅎㅎ 슬라이더를 이렇게 빨리 할 수 있다니 !

 

 

그 외 세부적인 옵션은 아래 링크에서 확인하기!

jQuery Content Slider | Responsive jQuery Slider | bxSlider