wallop icon indicating copy to clipboard operation
wallop copied to clipboard

equal height slides

Open kylegoines opened this issue 8 years ago • 4 comments

is there an easy way to achieve equal height slides?

kylegoines avatar Feb 15 '18 21:02 kylegoines

Depends on your use case. It should be easy to accomplish with css or some javascript eventually. I don't think it has anything to do with the library. If you'll create some working example I can possibly give you a hint.

honzabilek4 avatar Feb 16 '18 09:02 honzabilek4

Here's what I did to achieve equal height slides. (Only works if there's one slider on the page)

// Ensure slides are the same height
window.onload = function(e){ 
  var maxHeight = 0;
  document.querySelectorAll('.Wallop-item').forEach(function(item){
    if (item.clientHeight > maxHeight) maxHeight = item.clientHeight;
  });

  document.querySelectorAll('.Wallop-item').forEach(function(item){
    if (maxHeight > 0) item.style.height = maxHeight + 'px';
  });
}

samnabi avatar Feb 21 '18 14:02 samnabi

FYI: NodeList.prototype.forEach() is not supported in IE.

honzabilek4 avatar Feb 21 '18 19:02 honzabilek4

@honzabilek4 may be you could add a css rule for .Wallop-item?

soumyanjaleemahapatra avatar Mar 08 '18 09:03 soumyanjaleemahapatra