Why Flexsider’s Carousel Demo with Dynamic Sizing Doesn’t Work

I’ve scratched my head a few too many times to not post this (if only for my own reference). The ever amazing and rarely updated Flexslider from the folks at Woocommerce has a bug in one of the demos that doesn’t make it operate as intended. It’s the carousel with a dynamic number of elements that changes with the width of the site. You can find it here.

There are two problems with their source code.

Firstly despite declaring a ‘flexslider’ variable at the top of the page they don’tĀ initialize the slider into this. You need to do this to update the sliders min and max values.

Secondly it seems they’re incorrectly updating the min and max sizes on the event of the window resizing. They’re using the property below which doesn’tĀ  work (especially because they’ve not associated their ‘flexslider’ variable with the slider itself).

flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;

However to correctly update this value in Flexslider you need to do the folllowing. Please note the different with $flexslider and flexslider is just my naming convention.

$flexslider.data('flexslider').vars.minItems = gridSize;
$flexslider.data('flexslider').vars.maxItems = gridSize;

Heres the fully working code.

var $window = $(window),
    $flexslider;
 
// tiny helper function to add breakpoints
function getGridSize() {
  return (window.innerWidth < 768) ? 1 : 3;
}
 
$window.load(function() {
  // Carousel Homepage
  $flexslider = $('.flexslider').flexslider({
    animation: "slide",
    itemWidth: 360,
    itemMargin: 25,
    minItems: getGridSize(),
    maxItems: getGridSize(),
    slideshow: false,
    prevText: "Prev"
  });  
});
 
if(!!$('.flexslider').length) {
  // check grid size on resize event
  $window.resize(function() {
    var gridSize = getGridSize();
    $flexslider.data('flexslider').vars.minItems = gridSize;
    $flexslider.data('flexslider').vars.maxItems = gridSize;
  });
}

Should you need to add additional break points or different breakpoints just update the getGridSize function.

WordPress CCK – Getting close to Drupal

Recently I’ve been required and requested to use WordPress more and more. When I started I was somewhat reluctant. My first WordPress sites were built over 4 years ago and since then I’ve changed CMS more often than I’d like to admit. I liked certain features of WordPress, such as its ease to update and basic layout in the backend. However I was always in the constant search for the best CMS. Each present their own unique, but great qualities, but for me Drupal won out. I could do just about anything I wanted in Drupal – but this came with the draw back, Drupal is so customisable that you often spend hours just creating a good base setup. Essentially Drupal was king to me because of one specific module, CCK. The module that allowed you to create custom nodes and assign them custom content types. It was an amazing tool that could aid you in any requirements a client could throw at you. The module was so good that in Drupal 7 CCK became part of Drupal itself.

I remember when WP 3 came out that I read a few articles about how WordPress had added the ability to create custom content types. I was excited, but annoyed by the labour intensive process it would require to implement such things. Today however I feel I have finally found that sweet spot that means WordPress and Drupal are almost on the same level from my development point of view. There are a number of plugins for WordPress now available to help you create and manage custom content types from the backend. Further more there are also some amazing tools to aid you in creating advanced custom fields for these newly created or existing content types.

I quite like Advanced Custom Fields and Custom Post Type UI, but as I say there are many out there.

I also quite liked a little article I read on Randy Jensen’s blog. He’s written a post and included a download for 3000 icons you can use when creating custom content types and the source you can add to your themes functions.php to have theme appear.

Just keep in mind however Drupal is still way more extensive that WP, so do some research before starting any project.