title: jQuery cycle2 plugin: hide controls if only 1 image
body: <p>I have created a wordpress website where i have integrated the cycle2 plugin into the gallery. When the user adds more than 1 image the controls show up and the slideshow transitions start. I want the controls to hide when there is only 1 image.I have a snippet of code that will aid the development of the process but tried adding css display:none into the function and nothing happens. If someone could guide me this would be great as i've tried different methods.</p>
  
  <p>Plugin: <a href="http://www.malsup.com/jquery/cycle2/" rel="nofollow">http://www.malsup.com/jquery/cycle2/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.cycle-slideshow {
      height:400px;
      z-index:0;
  }
  .cycle-slideshow  img{
      width:100%;
      height:100%;
      z-index:3;
  }
  .center {
      display:block;
  }
  .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;
  }
  </code></pre>
  
  <p>HTML: The html for this is huge and integrated into php functions but it is along the lines of:</p>
  
  <pre><code>&lt;div class="cycle-slideshow" 
      data-cycle-fx=fadeout
      data-cycle-timeout=1000
      data-cycle-pause-on-hover="true"&gt;
      &lt;img src="http://malsup.github.com/images/p1.jpg"&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Snippet of jQuery (where i am confused):</p>
  
  <pre><code>$(document).ready(function () {   
              $('.cycle-slideshow').on( 'cycle-initialized', function( e, opts ) {
              if ( opts.slideCount &gt; 1 ) {
                  $(".center").css("display", "none");
              }
              });
          });
  </code></pre>
  
  <p>I also get no errors in my console.</p>