I have a code snippet below that enables swiping between different divs when an image is clicked.
The issue I am facing is that I am only able to swipe between the red and green divs, but I want to achieve a swipe sequence of red > green > blue. Any suggestions on how I can make this happen?
Thank you in advance!
/* The following are individual divs that can be scrolled through */
#left {
min-width:100%;
min-height:300px;
background:red;
position:absolute;
top: 0;
left:0;
}
#right {
min-width:100%;
min-height:300px;
background:blue;
position:absolute;
top: 0;
right:-105%;
}
#middle {
min-width:100%;
min-height:300px;
background:green;
position:absolute;
top: 0;
right:-205%;
}
JS/JQuery:
<script>
$(document).ready(function() {
//Scroll all content to the left <---- like this
$('#scrollRight').click(function(e) {
$('.container').animate({'left': '-105%'});
});
//Scroll all content to the right ----> like this
$('#scrollLeft').click(function(e) {
$('.container').animate({'left': '0%'});
});
//End document ready function.
});
</script>
HTML:
<div class="container">
<!-- Add the last div first so that each subsequent div will follow...ensuring the initial div you want visible is in the first position -->
<div id="right">right scroll</div>
<div id="middle">left scroll</div>
<div id="left">left scroll</div>
</div>
Check out the Fiddle here: