Search code examples
javascriptjqueryorbit

Orbit slider works but how to add bullet navigation?

I've searched for this but haven't been able to find the one thing i need. I would like to use my own bullets in orbit slider.

Now my questions: - How can i add my bullets (slider is working but i don't know how to add the bullets)
- And how can i let the bullets change? because i made an image for when it's selected and one for when it isn't selected.

thanks in advance.

Solution

  • You can see these code in orbit.css file

    .orbit-bullets li {
    float: left;
    margin-left: 5px;
    cursor: pointer;
    color: #999;
    text-indent: -9999px;
    background: url(/playground/playground/jquery-image-slider-plugin/orbit/bullets.jpg) no-repeat 4px 0;
    width: 13px;
    height: 12px;
    overflow: hidden; }

.orbit-bullets li.active {
    color: #222;
    background-position: -8px 0; }

    But it uses the image sprites.

    If you have separate images for each, use the background property of each to specify the image.