Issues creating custom Flexslider navigational arrows

Question

I am using Flexslider v2.0 and am trying to create my own custom navigational arrow that will sit directly below the slideshow.

From what I have been reading I have to create my own slider navigation and make use of the Flexslider "controlsContainer" & "manualControls" controls.

So far I have only achieved making the new custom arrows navigate only 1 step forward or one step backwards. I cannnot get it to navigate like the built in navigation arrows.

Here is the code:

CSS

.flex-direction-nav2 {  }
.flex-direction-nav2 a {width:30px; height:30px; margin:-20px 0 0; display:block; background:url(../images/flexslider/bg_direction_nav.png) no-repeat 0 0; z-index:10; cursor:pointer; text-indent:-9999px; -webkit-transition:all .3s ease }
.flex-direction-nav2 .flex-next {  display:inline-block;background:url(../images/shortcodes/testimonials/arrow-right-01.png) no-repeat 50%; background-color:#000; right:-1px; z-index:6}
.flex-direction-nav2 .flex-prev {  display:inline-block;background:url(../images/shortcodes/testimonials/arrow-left-01.png) no-repeat 50%; background-color:#fff; right:25px; -webkit-box-shadow:3px 0 0 0 #fff; box-shadow:3px 0 0 0px #fff; z-index:5}

HTML

<div class="testimonial-container clearfix">
  <div class="title">
    <h3><span>What Client’s Say</span></h3>
  </div>
  <div class="testimonials clearfix">
    <ul class="slides">
      <li>
        <div class="testimonials-content">CONTENT</div>
      </li>
      <li>
        <div class="testimonials-content">CONTENT</div>
      </li>
      <li>
        <div class="testimonials-content">CONTENT</div>
      </li>
    </ul>
  </div>
  <ul class="flex-direction-nav2">
    <li><a href="#" class="flex-prev">Prev</a></li>
    <li><a href="#" class="flex-next">Next</a></li>
  </ul>
</div>

jQuery

/* Testimonial Slider */
$('.testimonials').flexslider({
    animation: "slide",
    directionNav: true,
    controlNav: true,
    animationLoop: true,
    pauseOnAction: true,
    pauseOnHover: true,
    nextText: "Next",
    prevText: "Previous",
    controlsContainer: ".testimonial-container",
    manualControls: ".flex-direction-nav2 li a"
});

Any help would be greatly appreciated.

Thanks

Answer 1

If you want to customize the controls, you don't need to manually add the controls in your source. If you change "controlsContainer" to be ".testimonials", it will create the "ul" inside that container immediately following the slides list. You can then style those however you want. We have custom styled arrows on ND.edu and other sites such as provost.nd.edu and dailydomer.nd.edu that sit below the slider. To accomplish what you're after, you may need to wrap an extra div around ".testimonials" and set your controlsContainer to that.