Question

I have installed the flexslider plugin, click here which is working fine, However there’s a small element in the JS i want to change, which is the slide identifiers click here
At present flexslider creates ul classes field called flex-control-nav and flex-control-paging which creates an li class called flex-active for the page identifiers These fields are not in my HTML.

Is there a way i can get the JS to create an individual ID for the identifiers as i want to style each identifier differently. I would paste the code but there’s quite alot of it. If you inspect element the link above, the main flexsilder JS is in flexsilder.js

Answer 1

Doing the following worked me…

<!-- Inside of slider element -->
<div class="flexslider">
<ul class="slides">
...
</ul>
<ul class="custom-controls">
<li><a href="#">Slide One</a></li>
...
</ul>
</div>

//Inside .flexslider() properties
manualControls: '.custom-controls li a'


<!-- Outside of slider element - must use controlsContainer property -->
<div class"flex-container">
<div class="flexslider">
<ul class="slides">
  ...
</ul>
 </div>
 <ul class="custom-controls">
  <li><a href="#">Slide One</a></li>
   ...
 </ul>
 </div>
 //Inside .flexslider() properties
  manualControls: '.custom-controls li a',
  controlsContainer: '.flex-container'