example of making flickity slider more adaptive.

app.js

  $sliderElement = $('.variation-slider');

  var sliderOptions = {
    cellSelector: '.variation-slide',
    freeScroll: true,
    pageDots: false,
    imagesLoaded: true,
    percentPosition: false,
    wrapAround: true
  };

  adaptiveFlickity($sliderElement, sliderOptions);

  // add a resize listener with throttle here ?

  function duplicateSlides(cellSelector) {
    if ($(cellSelector + '.duplicate-cell').length) {
      return false;
    }
    var $slides = $(cellSelector).clone();
    $slides.addClass('duplicate-cell');
    $(cellSelector)
      .last()
      .after($slides);
  }

  function adaptiveFlickity($sliderElement, sliderOptions) {
    // get out if the slider is hidden
    if ($sliderElement.css('display') == 'none') {
      return false;
    }
    var cellWidths = 0;
    $(sliderOptions.cellSelector).each(function() {
      if ($(this).hasClass('duplicate-cell')) {
        return;
      }
      // add the widths f each cell
      cellWidths += $(this).outerWidth();
    });
    // do duplicate slides exist? We'll use this later
    var areDuplicates = $sliderElement.find('.duplicate-cell').length;
    // if slides are wider than viewport ... let's have a slider
    if (cellWidths > $sliderElement.width()) {
      var plentyOfSlides = cellWidths > $sliderElement.width() * 1.6;
      var reInit = false;

      if (plentyOfSlides && areDuplicates) {
        // we don't need duplicate cells if there are plenty of original cells
        $sliderElement.find('.duplicate-cell').remove();
        reInit = true;
      } else if (!plentyOfSlides && !areDuplicates) {
        // we do need duplicates if there aren't plenty of cells
        duplicateSlides(sliderOptions.cellSelector);
        reInit = true;
      }
      // if we're going to re-init then destroy first
      if (reInit && $sliderElement.hasClass('flickity-enabled')) {
        $sliderElement.flickity('destroy');
      }
      // if we need to reInit or flickity is not enabled
      if (reInit || !$sliderElement.hasClass('flickity-enabled')) {
        // create flickity with options
        $sliderElement.flickity(sliderOptions);
      }
    } else {
      // slides are narrower than viewport
      if (areDuplicates) {
        // remove the duplicates from DOM
        $sliderElement.find('.duplicate-cell').remove();
      }
      // if flickity is enabled
      if ($sliderElement.hasClass('flickity-enabled')) {
        // destroy flickity
        $sliderElement.flickity('destroy');
      }
    }
  }