Swipe Show Navigation

dots under show not moving

[bsim]

I thought this was a css issue, but was suggested I post here. I didn't create the js code. My problem:

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);
}
Test page:
[192.185.168.157 ]

[GoNC]

I can't envision how this is supposed to look, and the test page link you gave is giving me a 404. If you're still needing help, please post a working link, and I'll look at it.

[bsim]

This is a test site - hope it will work on the forum. Am still wrestling with this. Thanks for any help.

[192.185.168.157 ]

[GoNC]

I'm not familiar with cookie-cutter programs like that, so I can only speak generically.

At around line 245 on the main page, you have these:

<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
// startSlide: 4,
// auto: 3000,
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, element) {},
// transitionEnd: function(index, element) {}
});

// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

</script>

Are all of the variables supposed to be commented out? The // in the beginning denotes it as a comment.

[bsim]

I think so - it is what was supplied to copy. It is interfering with the function?

[GoNC]

I'm really not familiar with the swipe.js program you're using, and it's quite a bit to try to read through manually (which is probably why no one else has replied). But putting the // before every line seems counterproductive; why set the variable values if the line is ignored?

You might try removing the //, just to find out. I'm guessing that it should either be this:

<script>

var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide: 4,
auto: 3000,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function(index, element) {},
transitionEnd: function(index, element) {}
});

</script>

OR this, if you're using jQuery:

<script>
window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>

If that's not it, the other thing that stood out to me is that I couldn't find "dots" or "position" in the swipe.js file, so I'm not sure how these are defined. Are these the ID names that the instruction file gave?

I would have thought that there would be something to make each picture correspond to a dot image; like:

<div id="pic_1"><img src="image_1.jpg"></div>
<div id="dot_1"><img src="dog_1.jpg"></div>

Then, the script could refer to

for (var i=0; i < n; i++) {
document.getElementById('pic_' + i).innerHTML = "something";
document.getElementById('dot_' + i).innerHTML = "something";
}

If you're doing this for the sake of learning, this code might be easier to read and learn:

[javascriptkit.com...]

If this is more than a project, though, and necessary for work, it might be easier to just make it a regular onClick event rather than trying to code a swipe.

[bsim]

You were right it was commented out. I've gotten this (bottom of the page) to show the dots move as the swipe moves. Yes, the dots, and position class and ID are in the css file. Thanks so much for your help!

var bullets = document.getElementById('position').getElementsByTagName('li');
window.mySwipe = Swipe( document.getElementById('mySwipe'), {
  callback: function (pos) {

    var i = bullets.length;
    while (i--) {
      bullets[i].className = ' ';
    }
    bullets[pos].className = 'on';

  }
});