bxSlider 예제5. 캐러셀
2016. 7. 22. 23:18ㆍbxSlider/예제
반응형
5. Carousels demystified - in depth explanation with examples
JS:
$(document).ready(function(){
$('.slider4').bxSlider({
slideWidth: 250,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10
});
});
HTML:
<div class="slider4">
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/250x150&text=FooBar10"></div>
</div>
반응형
'bxSlider > 예제' 카테고리의 다른 글
| bxSlider 예제7. 캐러셀 - 보여주는 슬라이드의 동적 수 (0) | 2016.07.22 |
|---|---|
| bxSlider 예제6. 캐러셀 - 보여주는 슬라이드의 고정 수 (0) | 2016.07.22 |
| bxSlider 예제4. 컨텐츠의 높이에 따라 반응하는 슬라이드 (0) | 2016.07.22 |
| bxSlider 예제3. 무한루프 없이 수동 슬라이드 (0) | 2016.07.22 |
| bxSlider 예제2. 시작/정지 버튼과 자동 슬라이드 (2) | 2016.07.22 |