Flexslider in Tab repeater not sizing correctly - slides on top of each other

I have a working set of tabs. I am trying to add a flexslider to one of the tabs. The flexslider works when not inside the tab. Inside the tab, there is an issue with the width and they are loading on top of each other.

Here is my flexslider code:

Code
 <script>
    require(['jquery', 'flexslider'], function($) {
    $(window).on('load',function()
    {
      var storiesWidth = $('.stories').width();
      var storyWidth;
      if (storiesWidth >= 1280)
      {
        storyWidth = storiesWidth / 3;
      }
      else if (storiesWidth >= 522)
      {
        storyWidth = storiesWidth / 3;
      }
      else
      {
        storyWidth = storiesWidth;
      }

      $('.stories .flexslider').flexslider({
        animation: "slide", // fasde doesn't work for carousel
        animationLoop: false,
        slideshow: false,
        controlNav: false,
        itemWidth: storyWidth,
        itemMargin: 0
      });
    });

    });
    </script>