FlexSlider dynamic vars from parent data attributes

Question

I am using this example of FlexSlider and I need to get the itemWidth from parent data attribute.

<div class="flexslider" data-item-width="500">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: $( this ).data( 'itemWidth' ),
    itemMargin: 5
  });
});

The problem is that $( this ).data( 'itemWidth' ) gives undefined. It seems I can not access the parent data attributes. What I am doing wrong?

Answer 1

Using .data() only trims the first "data-" from the attribute name. It doesn't reformat it.

Also, in this context, this refers to window so it doesn't have any data-item-width property. Use another selector.

If you are trying to initialize multiple flexsliders with different properties, you should use $().each to iterate through them. In this case, you can use this to refer to the current .flexslider element.

$('.flexslider').each(function() {
  $(this).flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: $( this ).data( 'item-width' ),
    itemMargin: 5
  });
});