---
title: Vertical Demo
subTitle: Vertical
description: Vertical usage demo
sort: 2

tags: 
- demo
---

<div id="demoSlider" class="bxslider">
	<div class="item"><img src="{{assets}}/img/photo1.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo2.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo3.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo4.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo5.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo6.jpeg"></div>
</div>

{{#markdown }}

### Setup
```
$(document).ready(function(){
 	$('#demoSlider').bxSlider({ 
        mode: 'vertical',
        slideWidth: 400,
        minSlides: 3,
        moveSlides: 1
	});
});
```
### HTML
```
<div id="demoSlider" class="bxslider">
	<div class="item"><img src="{{assets}}/img/photo1.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo2.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo3.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo4.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo5.jpeg"></div>
	<div class="item"><img src="{{assets}}/img/photo6.jpeg"></div>
</div>
```

{{/markdown }}