title: BX Slider custom controls
body: <p>I'm attempting to use custom controls within the BX Slider plugin. I'm following the docs only:</p>
  
  <pre><code>&lt;div class="inner-hold"&gt;
   &lt;div class="mask"&gt;
      &lt;div class="slideset"&gt;
          &lt;div class="slide"&gt;
              &lt;div class="img-hold"&gt;
                  &lt;img src="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/images/img29.jpg"
                  alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="slide"&gt;
              &lt;div class="img-hold"&gt;
                  &lt;img src="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/images/img29.jpg"
                  alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="slide"&gt;
              &lt;div class="img-hold"&gt;
                  &lt;img src="&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/images/img29.jpg"
                  alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;a id="slider-prev" class="btn-prev" href="#"&gt;&lt;/a&gt;
   &lt;a id="slider-next" class="btn-next" href="#"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
  jQuery(document).ready(function ($) {
  
   $('.slideset').bxSlider({
      wrapperClass: 'foo',
      controls: false,
      slideWidth: 220,
      minSlides: 4,
      maxSlides: 4,
      slideMargin: 20,
      pager: false,
      nextSelector: "#slider-next",
      prevSelector: "#slider-prev",
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>fails to produce the magic. My <code>&lt;div class="slide"&gt;</code>'s remain static with the anchors (#slider-prev, #slider-next) directing to <code>http://exmple.com/#</code> only?</p>
  
  <p>edit:</p>
  
  <p>Thanks. Now it's dynamic but the HTML is clearly faulty now. My source looks like:</p>
  
  <pre><code>&lt;a id="slider-prev" class="btn-prev" href="#"&gt;
   &lt;a class="bx-prev disabled" href=""&gt;Prev&lt;/a&gt;
   &lt;a class="bx-prev" href=""&gt;Prev&lt;/a&gt;
  &lt;/a&gt;
  &lt;a id="slider-next" class="btn-next" href="#"&gt;
   &lt;a class="bx-next disabled" href=""&gt;Next&lt;/a&gt;
   &lt;a class="bx-next" href=""&gt;Next&lt;/a&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>and still my custom buttons dont work</p>