Swipe Show "Dots"

css style for swipe show

[bsim]

I am using a swipe show/slide show. The show works, but the "dots" below the show, which should follow as the user swipes don't, it also should follow the images as the slide show progresses. I have not altered the javascript, so am pretty sure this is a css issue.

I have tried adding an "a" tag within the list item, also tried a span with a class "on"

<span class="on"></span>

. The swipejs code (I did not create) I have used as written, but they have since updated the entire swipeshow, and no response to inquiries.
HTML:

<div class="dots">
 <ul id='position'>
  <li class='on'></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>

CSS:

.dots {
 margin: 7px auto 0px;
 position: relative;
 max-width: 680px;
}
.dots a {
 color: rgb(205, 205, 205) !important;
 font-style: normal;
}
.dots #position {
 list-style: none;
 margin: 0px;
 padding: 0px;
 text-align: center;
}
.dots #position li {
 background: rgb(255, 255, 255);
 margin: 0px 2px;
 border-radius: 10px;
 width: 10px;
 height: 10px;
 display: none;
 cursor: pointer;
 box-shadow: inset 0px 1px 3px grey, 0px 0px 1px 1px #8b8989;
}
.dots #position li.on {
 box-shadow: inset 0px 1px 3px -1px #7EC153, 0px 1px 2px rgba(0, 0, 0, 0.5);
 background-color: rgb(126, 193, 83);
}

[edited by: DrDoc at 5:51 pm (utc) on Jan 20, 2014]
[edit reason] No URLs please [/edit]

[Setek]

This isn't a CSS issue, this is a JS issue. Adding the class manually to any of the lis shows that the CSS works fine.

It's the JS that isn't removing the "on" class from one and adding it onto the next one.

You'd be better off asking this in the JS forum (http://www.webmasterworld.com/javascript/)

[bsim]

Thank you, I will post there.