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

L Younkins asked on August 26, 2021 17:22

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>

Recent Answers


David te Kloese answered on August 30, 2021 09:17

We don't see any code... But this seems specific to your implementation.

Do you only have the issue in the admin interface or also on the live site?

0 votesVote for this answer Mark as a Correct answer

L Younkins answered on August 30, 2021 14:42

Code wasnt showing up. Now it is.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.