Orbit Custom Bullets

bullets.html

<ul class="orbit-bullets">
  <li class="has-thumb active" style="background-image: url(/path/to/bullets/bullet-one.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">1</li>
  <li class="has-thumb" style="background-image: url(/path/to/bullets/bullet-two.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">2</li>
  <li class="has-thumb" style="background-image: url(/path/to/bullets/bullet-three.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">3</li>
</ul>

orbit-container.html

<div id="featuredBullets">
  <img src="slide-1.jpg" data-thumb="bullet-one.jpg" />
  <img src="slide-2.jpg" data-thumb="bullet-two.jpg" />
  <img src="slide-3.jpg" data-thumb="bullet-three.jpg" />
</div>

If you use anchor tag for images, you need to move "data-thumb" section in anchor tag.

<div id="featuredBullets">
  <a href="slide-1.html" data-thumb="bullet-one.jpg"><img src="slide-1.jpg" /></a>
  <a href="slide-2.html" data-thumb="bullet-two.jpg"><img src="slide-2.jpg" /></a>
  <a href="slide-3.html" data-thumb="bullet-three.jpg"><img src="slide-3.jpg" /></a>
</div>