Cycle2 - pager with custom pager buttons and mouseover event
I am working with the cool, responsive cycle2 plug in and am having trouble replicating something that worked fine using the original cycle plug in. I can't get the my custom pager to work properly in two areas: creating the pager buttons below the image, and getting the pagerEvent: 'mouseover' to work. The images fade just fine and are nicely responsive, but I can't get the pager buttons to work. Here is my code:
HTML
<h1 class="banner">
<div class="cycle-slideshow">
<img src="images/banner1.jpg" alt="Welcome to our new site! Small, nimble, stylish, affordable—that's how we roll. Let's talk.">
<img src="images/banner2.jpg" alt="THE AMERICAN WORKER PLAN">
<img src="images/banner3.jpg" alt="AHIMA">
</div>
<div id="custom-pager">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</h1>
CSS
h1.banner {
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 1280px;
}
h1.banner div.cycle-slideshow img {
vertical-align: middle;
border: 0 none;
width: 100%;
height: auto;
/*width: 100%;
max-width: 1280px;
min-width: 900px;*/
}
h1.banner div#custom-pager {
display: block;
}
h1.banner div#custom-pager > *{
cursor: pointer;
}
h1.banner div#custom-pager a {
background: none repeat scroll 0 0 #42464e;
border-radius: 5px 5px 5px 5px;
height: 10px;
margin: 20px 4px 0 4px;
width: 10px;
}
h1.banner div#custom-pager a.cycle-pager-active {
background: none repeat scroll 0 0 #b5bbc4;
}
Javascript
$('h1.banner .cycle-slideshow').cycle({
fx: 'fadeout',
speed: 500,
timeout: 7000,
pager: 'h1.banner #custom-pager',
pagerTemplate: "",
pagerEvent: 'mouseover',
pauseOnPagerHover: true,
autoHeight: true
});
I was able to get it to work well using the cycle plug in and following this demo: http://jquery.malsup.com/cycle/pager5.html, in my original design, but now need it to be responsive. many thanks