Cycle2 Plugin Hide/Show buttons jQuery - controls

Question

I have used the jQuery cycle2 plugin on a blog website. What i want the slideshow to do is when there is more than 1 image displayed, the controls will show-at the moment they are hidden through css.
The plugin is used by declaring it in my header (here is the link to the js file:
http://malsup.github.com/jquery.cycle2.js
And then my css contains a class for the container of the slideshow, class for the container for the buttons and a class each for prev and next buttons:
css:
.cycle-slideshow {
height:400px;
z-index:0;
}
.cycle-slideshow img{
width:100%;
height:100%;
z-index:3;
}
.center {
display:none;
}
.center a{
z-index:4;
position:absolute;
margin-top:-48px;
}
.center a:hover {
display:block;
}
.center a#prev, .center a#next{
position:relative;
width:4%;
height:60px;
width:60px;
margin-top:-60px;
font-size:40px;
text-align:center;
color:#FFF;
}
.center a#next{
float:right;
background:url(images/next.png) center -2px no-repeat;
}
.center a#prev {
float:left;
background:url(images/prev.png) center -2px no-repeat;
}
My html code is actually embedded within a wordpress function but the html format goes along the lines of:
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="200"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-swipe="true">
//does stuff here
</div>
<div class="center">
</div>
The following code i was told to do (the first three lines) but this still doesn't seem to work.
$(document).ready(function () {
$('.cycle-slideshow').on( 'cycle-initialized', function( e, opts ) {
if ( opts.slideCount > 1 ) {
$(".center").css("display", "block");
}
});
});
Im not the best with jQuery so can anyone help or give me any guidance please?

Answer 1

In this case you are going to want to initialize the slideshow via code AFTER you add the event handler. Remove the cycle-slideshow class so it doesn't auto initialize and then you can do this:
Demo: http://jsfiddle.net/lucuma/zyhrK/1/
$('.slideshow').on('cycle-initialized', function (e, opts) {
if (opts.slideCount > 1) {
$(".center").css({
"display": "block"
});
}
});
$('.slideshow').cycle();