---
title: Ticker Demo
subTitle: Ticker
description: Basic usage demo
sort: 13

tags: 
- demo
---

<h1>Ticker Mode - Horizontal</h1>
<div id="demoSlider1" 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(){
  $('#demoSlider2').bxSlider({  
	  minSlides: 4,
	  maxSlides: 4,
	  slideWidth: 170,
	  slideMargin: 10,
	  ticker: true,
	  tickerHover: true,
	  speed: 6000
  });
});
```
### 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 }} 

<h1>Ticker Mode - Vertical</h1>
<div id="demoSlider2" 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(){
  $('#demoSlider2').bxSlider({  
	  minSlides: 4,
	  maxSlides: 4,
	  slideWidth: 170,
	  slideMargin: 10,
	  ticker: true,
	  tickerHover: true,
	  speed: 6000
  });
});
```
### 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 }}