Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Swipe Show "Dots"

css style for swipe show

12:58 am on Jan 17, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 16, 2009
posts: 55
votes: 0

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.
<div class="dots">
<ul id='position'>
<li class='on'></li>

.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]

5:18 am on Jan 17, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0

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/)
5:26 am on Jan 17, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 16, 2009
posts: 55
votes: 0

Thank you, I will post there.