I'll note first that, especially when you're first learning new things, it's best to give every bit of information you have. It's easier for those with more experience to help you if they can see the whole picture.
This is pulling from koala_dev's answer. After figuring out what your requirements are I put together a fiddle: http://jsfiddle.net/rCsHG/
A couple of things to note:
You have to get rid of those
id
attributes, as already mentionedYou need to wrap your entire slideshow (which is actually 2 slideshows) in a wrapper. You can then
position:relative
the main wrapper, andposition:absolute
the slideshows.You should have separate classes for each slideshow; I know it was working for you, but it's just good practice.
So, your HTML will look like this:
<div class="slideshow-wrapper">
<div class = "slideshow-img">
{% for photo in gallery %}
<img class = "gallery-image" src ="{{ photo.image.url }}"/>
{% endfor %}
</div>
<div class = "slideshow-caption">
{% for photo in gallery %}
<div class = "caption-container">{{ photo.caption }}</div>
{% endfor %}
</div>
</div>
Then CSS:
.slideshow-wrapper {
position: relative;
}
.slideshow-img, .slideshow-caption {
position: absolute;
width: 100%;
}
.slideshow-caption {
top: 0;
}
And, finally, JavaScript:
$(document).ready(function(){
var _timeout = 100; // when using the same value in multiple places, consider storing it in a variable for easy modification
$(".slideshow-img").cycle({
fx: 'scrollRight',
// add back in your prev/next
timeout: _timeout,})
$(".slideshow-caption").cycle({
fx: 'scrollLeft',
// add back in your prev/next
timeout: _timeout,})
})