bxSlider
2016. 7. 22. 22:55ㆍbxSlider/시작하기
반응형
요즘 bxSlider.com 홈페이지를 들어가면 얼마나 느린지...
워낙에 깔끔하게 쓸 수 있으니 많이 알려져서 사용자가 굉장히 많은 것 같다.
특히 일과 시간에... 로딩이 너무 오래 걸리거나 아예 페이지가 뜨지 않을 때도 있다.
그래서 따로 정리 해놓고 보려고 한다...
설치방법
bxslider를 사용하기 위한 셋팅
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
HTML 마크업
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
bxslider 실행
$(document).ready(function(){
$('.bxslider').bxSlider();
});
jquery.bxslider.zip
다운로드 (bxslider.com)
다운로드 (GitHub)
- bxSlider
- 옵션
- bxSlider
- 예제1. 이미지와 함께 쓰는 캡션
- bxSlider
- 예제2. 시작/정지 버튼과 자동 슬라이드
- bxSlider
- 예제3. 무한루프 없이 수동 슬라이드
- bxSlider
- 예제4. 컨텐츠의 높이에 따라 반응하는 슬라이드
- bxSlider
- 예제5. 캐러셀
- bxSlider
- 예제6. 캐러셀 - 보여주는 슬라이드의 고정 수
- bxSlider
- 예제7. 캐러셀 - 보여주는 슬라이드의 동적 수
- bxSlider
- 예제8. 썸네일 페이징 - 방법1
- bxSlider
- 예제9. 썸네일 페이징 - 방법2
- bxSlider
- 예제10. 수직(세로방향) 슬라이드
- bxSlider
- 예제11. 이전/다음 버튼의 사용자 정의
- bxSlider
- 예제12. 복수(멀티) 슬라이드
- bxSlider
- 예제13. Callback API
- bxSlider
- 예제14. Public methods
- bxSlider
- 예제15. Responsive video
- bxSlider
- 예제16. 계속 슬라이드 (Ticker mode)
- bxSlider
- 예제17. Custom easing
- bxSlider
- 예제18. Reload slider
반응형