Search jQuery

jQuery Forum

jQuery Cycle plugin-How to animate pagers position according to the current slideshow index

in Using jQuery Plugins • 11 years ago

Here's what I have: I have 5 sliding photos on the page, and there are the pagers 1-5 below the sliding photos. I want to show only 3 pagers at a time, so the 4th and 5th pagers are hidden right now. You can click on the "Next" button to animate the div that contains the pagers to show the 4th and 5th, click on "Prev" button and you go back showing 1st-3rd pagers.

Here's what I want to achieve but don't know how... How do I make the div that contains all pagers to move left to show the 4th and 5th pagers when the slideshow slides to the 4th photo?? Meaning when the slideshow reaches the 4th photo, how do I make that div to move the way just like as if I clicked on the "Next" button?? (And when the slide goes back to the 1st photo, the pagers should move again so it's showing the 1st-3rd pager once again.)

I have no idea which part of the script can let me know which slide is currently active. If I know, I guess I can trigger the animation of div when the 4th one is active...

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cycle Test</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx: 'turnDown',
speed: 'fast',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '#nav li:eq(' + (idx) + ') a';
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#next_control').click(function() {
var c = $('#nav_content');
var pos = c.position();
var w = c.width();
var status = w + pos.left;
var dif = w - 190;
var x = w + dif;
if (status > 190) {
c.stop().animate({
left: pos.left - 180
}, 500)
};
});
});
$(document).ready(function() {
$('#prev_control').click(function() {
var c = $('#nav_content');
var pos = c.position();
if (pos.left < 0) {
c.stop().animate({
left: pos.left + 180
}, 500)
};
});
});
</script>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#slideshow {
overflow: hidden;
position: relative;
height: 200px;
width: 200px;
}
#bot {
background-color: #CCC;
height: 50px;
width: 290px;
margin-top: 10px;
position: relative;
}
#nav_content #nav li {
list-style-type: none;
float: left;
height:50px;
width: 50px;
margin-left: 10px;
}
#bot #nav_wrapper {
background-color: #FFF;
float: left;
height: 50px;
width: 190px;
overflow: hidden;
position: relative;
}
#bot #previous {
float: left;
height: 50px;
width: 50px;
}
#bot #next {
float: right;
height: 50px;
width: 50px;
}
#bot #nav_wrapper #nav_content {
height: 50px;
width: 310px;
position: absolute;
left: 0px;
top: 0px;
}
-->
</style>
</head>
<body>
<div id="slideshow">
<img src="img/beach1.jpg" />
<img src="img/beach2.jpg" />
<img src="img/beach3.jpg" />
<img src="img/beach4.jpg" />
<img src="img/beach5.jpg" />
</div>
<div id="bot">
<div id="previous"><a id="prev_control" href="#">Prev</a></div>
<div id="nav_wrapper">
<div id="nav_content">
<ul id="nav">
<li><a href="#"><img src="img/beach1.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="img/beach2.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="img/beach3.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="img/beach4.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="img/beach5.jpg" width="50" height="50" /></a></li>
</ul>
</div>
</div>
<div id="next"><a id="next_control" href="#">Next</a></div>
</div>
</body>
</html>

Response title

Attachments

jQuery Forum

jQuery Cycle plugin-How to animate pagers position according to the current slideshow index

Statistics

Tags

Actions