캐러셀구현 - bxSlider 플러그인 (feat. jquery)

• 장점1 : 캐러셀에 필요한 다양한 기능 지원
• 장점2 : 반응형 지원으로 모바일 캐러셀을 구현가능

bxslider.com/

jQuery Content Slider | Responsive jQuery Slider | bxSlider

jquery.bxslider.js

0.06MB

jquery.bxslider.min.js

0.02MB

jquery.bxslider.css

0.00MB

jquery.bxslider.min.css

0.00MB

• 주의점1 : 사용할 이미지들은 div에 각각 담기.
• 주의점2 : 전체 이미지들을 한 div로 감싸기.
• 주의점3 : 스크립트 파일에서 주의점2에서 지칭한 div를 선택.  bxSlider() 함수를 호출한다. 

---

script 사용법 (div.bxslider로 전체이미지를 묶어둔 상태, 주의할 점은 bxslider는 지정된 클래스명입니다. )

    $(function(){

        $('.bxslider').bxSlider();

      });

---

   $(function(){

        $('.bxslider').bxSlider({slideWidth:600});

      });

슬라이드는 기본값이 화면너비의 100%입니다. 이때 slideWidth 옵션을 이용하여 너비값을 조절합니다.

---

   $(function(){

        $('.bxslider').bxSlider({slideWidth:600, captions:true});

      });

그림에 대한 속성값(title)이 슬라이더에 뜰수있게 옵션을 주었습니다. (이미지에 title 속성을 주어야 해당 캡션이 뜹니다.)

---

     $(function(){

        $('.bxslider').bxSlider({

          slideWidth:600, 

          captions:true,

          auto:true,

          autoControls:true,

          stopAutoOnClick:true

        });

      });

이번에는 자동실행, 컨트롤 버튼(재생/정지), 클릭해서 자동 실행 멈출수 있도록 지정하는 등의 옵션을 추가했습니다.

---

자세한 옵션은 bxslider.com/options를 참고하세요.