javascript - How to test if an element inside a "carousel" (a container with overflow:hidden" having multiple large children) is visually visible? -

i'm looking generic (native) javascript function tell if element visible, can take account elements in "carousel" (aka "slider");
these containers "slides", each element positioned left (or right) of previous 1 - 1 of them visible.
example can seen in web page: http://www.technobuffalo.com/2015/07/22/iphone-7-concept-sports-quad-hd-retina-display-wireless-charging/

edit: example carousel 3 slides:

<div class="carousel">     <div class="slide" style="left:0"><img src="..." /></div>     <div class="slide" style="left:640px"><img src="..." /></div>     <div class="slide" style="left:1280px"><img src="..." /></div> </div>  <style>    .carousel  {       width: 640px;       height: 460px;       overflow: hidden;    }    .slide {       position: absolute;       width: 100%;       height: 100%;    }  </style> 

the function should return false images not directly visible in carousel.

i've tried numerous techniques suggested in answers in questions regarding visibility detection, amongst them - checking offsetparent, offsetleft, offsetright, , using getcomputedstyle , checking display, , more, of them return true invisible images in carousel.

answering own question.

// function return true if element inside "carousel" visually invisible. function isoffsethidden(elem) {   if (elem.nodename == "body") return false;   // find out if parent of element has 'overflow:hidden':   var p = elem, isoverflow = false;   while ((p=p.parentnode) && p.nodename!=="body") {     if (window.getcomputedstyle(p)['overflow']=="hidden") {       isoverflow = true;       break;     }   }   if (isoverflow) {     var er = elem.getboundingclientrect(),         pr = p.getboundingclientrect();      return (er.right < pr.left || er.bottom < pr.top || er.left < pr.right || er.top < pr.bottom);    }   return false; } 

it works first trying find container overflow:hidden, if element inside container overflow:hidden , "outside of bounds" of container, function returns true.

in while loop need stop when element body, otherwise go on until document , throw error saying argument window.getcomputedstyle "does not implement element interface".

i'll re-edit title of question more specific problem.