Welcome to WebmasterWorld Guest from 54.221.49.52

Forum Moderators: not2easy

Message Too Old, No Replies

Swipe Show "Dots"

css style for swipe show

     

bsim

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

5+ Year Member



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

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

10+ Year Member



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

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

5+ Year Member



Thank you, I will post there.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month