Reply To: Multiple flexsliders on site

• enorog

• May 5, 2014 at 1:06 am

You need to be more specific. If the sliders are always a different size, you could add another ACF field for width and height and then use that field to set width and height in the template file.

For example:

<div class="flexcontainer">
    <div id="first-slider" class="flexslider" style:"width:<?php echo get_field("slider_width") ?>">
        <ul class="slides">
        ...
        </ul>
    </div> 
</div>

If you have control over the javascript settings, just include the flexslider configuration inside the page (in a script tag) and again use ACF field for dimensions

There is also a strict javascript approach (when you don’t know the dimensions of images inside the slider).

var evenSliderHeight = function(slideContainer, slideItem) {
  var slider_height = 0;
  var $slider_slide = $(slideContainer).find(slideItem);
  $slider_slide.each(function() {
    var __height = $(this).outerHeight(true);
    if ( slider_height < __height ) {
       slider_height = __height;
    }
  });
  $slider_slide.css('min-height', slider_height);
};
evenSliderHeight('.flexslider-container', '.slide');