Problems Creating Custom Flexslider Navigation Arrows

Question

I am using Flexslider v2.0 and trying to create my own navigation arrow that will sit right below the slide show.

From what I read, I need to create my own slider navigation and use the "controlContainer" and "manualControls" Flexslider controls.

So far, I have only achieved that the new custom arrows move only one step forward or one step backward. I can't make it move 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 controls, you do not need to manually add controls to your source. If you change the "controlsContainer" to ".testimonials", it will create a "ul" inside this container, right after the list of slides. Then you can use the style as you want. We have special arrows on ND.edu and other sites, such as provost.nd.edu and dailydomer.nd.edu, which sit below the slider. To accomplish what you need, you may need to wrap an additional div around ".testimonials" and set a Container for your control.

Answer 2

flexslider generates a navigation control in its JS plugin and uses CSS from its stylesheet. in IMHO you need to rewrite the stylesheet and change the plugin to use the navigation control you define. I did this at sharepoint by rotating the banner using flexslider 2. You can take a look at https://logicalforhad.wordpress.com/2014/11/18/sharepoint-rotating-banner-with-custom-pagination-control-using-font -awesome / Everything is clearly explained here.

Answer 3

Or you can try to trigger the navigation behavior as described here

(Or you can switch to slick :))