SwipeView
SwipeView copied to clipboard
Skipping Slides -- 1, 2... 6?
Using Swipeview to create a touch-enabled carousel with 6 images. The order of the images jumps from 1, 2, to 6. First, second and last. I have not edited swipeview.js -- I think there may be something wrong with the js code that breaks when you change the number of slides.
really too few parameters to elaborate a diagnosis...
Sorry about that -- to be more specific, I made the following changes to the JS within the index.html. I suspect this broke the loop, so that slides are skipped. If this is not the problem area, would love some feedback on where else I could look to fix this.
for (i=0; i<3; i++) {
page = i==0 ? slides.length-1 : i-1;
alert(page);
el = document.createElement("h2");
el.innerHTML = slides[page].desc;
gallery.masterPages[i].appendChild(el);
el = document.createElement('img');
el.className = 'loading';
el.src = slides[page].img;
el.onload = function () { this.className = ''; }
gallery.masterPages[i].appendChild(el);
el = document.createElement('span');
el.innerHTML = '<form><input type="button" value="Cook It"/></form>';
gallery.masterPages[i].appendChild(el)
}
Here are the slides I'm attempting to show in order. (Again, the result is displaying 1, 2... 6)
var gallery,
el,
i,
page,
dots = document.querySelectorAll('#nav li'),
slides = [
{
img: 'img/food/img1.jpg',
desc: '1 - img1.jpg'
},
{
img: 'img/food/img2.jpg',
desc: '2 - img2.jpg'
},
{
img: 'img/food/img3.jpg',
desc: '3 - img3.jpg'
},
{
img: 'img/food/img4.jpg',
desc: '4 - img4.jpg'
},
{
img: 'img/food/img4.jpg',
desc: '5 - img 4'
},
{
img: 'img/food/img2.jpg',
desc: '6 - img2'
}
];
I just ran into this problem too. I think you have to change the code that follows gallery.onFlip(function () in your JS within the index.html to match what you changed it to when you were loading the initial data.