Support

Account

Home Forums Add-ons Gallery Field Multiple flexsliders on site

Solving

Multiple flexsliders on site

  • 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?

  • 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');
Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Multiple flexsliders on site’ is closed to new replies.