---
title: Caption Demo
subTitle: Captions
nav: demos
description: Slider with Captions
sort: 6

tags: 
- demo
---
{{#markdown }}
#### Captions
{{/markdown }}

<div id="demoSlider" class="bxslider">
	<div class="item"><img src="{{assets}}/img/photo1.jpeg" title="Caption 1"></div>
	<div class="item"><img src="{{assets}}/img/photo2.jpeg" title="Caption 2"></div>
	<div class="item"><img src="{{assets}}/img/photo3.jpeg" title="Caption 3"></div>
	<div class="item"><img src="{{assets}}/img/photo4.jpeg" title="Caption 4"></div>
	<div class="item"><img src="{{assets}}/img/photo5.jpeg" title="Caption 5"></div>
	<div class="item"><img src="{{assets}}/img/photo6.jpeg" title="Caption 6"></div>
</div>

{{#markdown }}
### Overview

Basic demo that shows how to display captions with bxSlider. Captions are pulled from the title attribute of the image for the slide. 

Add center to setup:
```
captions: true
```

### Setup
```
$('.bxslider').bxSlider({
  captions: true
});
```
{{/markdown }}