Я ищу универсальную (собственную) функцию 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
для невидимых изображений в карусели.