Multiple flexsliders on site

• clamoreaux

• May 3, 2014 at 11:44 am

On the home page of my site there is a flexslider. The site is basically a catalog of colleges. I need to add an additional flexslider to each college info page. The page template is populated with an ACF group. I added a gallery field and and the code to see it on a college info page. But I am having trouble sizing the slider. The slider is always square. Any ideas how to format the width and height of two different flexsliders independently?

• 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');