Как проверить, визуально виден ли элемент внутри "карусели" (контейнер с переполнением: скрытый "с несколькими большими детьми)?

Я ищу универсальную (собственную) функцию Javascript, которая могла бы определить, является ли элемент видимым, который может принимать во внимание элементы в "карусели" (он же "слайдер" );
Обычно это контейнеры с "слайдами", каждый из которых расположен слева (или справа) предыдущего, но только один из них на самом деле видимый.
Пример можно увидеть на этой веб-странице: http://www.technobuffalo.com/2015/07/22/iphone-7-concept-sports-quad-hd-retina-display-wireless-charging/

EDIT: Пример для карусели с тремя слайдами:

<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>

Функция должна возвращать false для изображений, невидимых непосредственно в карусели.

Я пробовал множество методов, предложенных в ответах в SO на вопросы обнаружения видимости, среди них - проверка offsetParent, offsetLeft, offsetRight и использование getComputedStyle и проверка display и многое другое, но все они возвращают true для невидимых изображений в карусели.

Ответ 1

Отвечая на мой собственный вопрос.

// This function will return true if an element inside a "carousel" is visually invisible.
function isOffsetHidden(elem) {
  if (elem.nodeName == "BODY") return false;
  // find out if any parent of the 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;
}

Он работает, сначала пытаясь найти контейнер с overflow:hidden, тогда если элемент находится внутри контейнера с overflow:hidden и "вне границ" контейнера, функция возвращает true.

В цикле while нам нужно остановиться, когда элемент body, в противном случае он будет продолжаться до Document и вызовет ошибку, говоря, что аргумент для window.getComputedStyle "не реализует интерфейс Element".

Я также переконфигурирую название вопроса, чтобы быть более конкретным для проблемы.