Sorry for my English when compiling the title, I tried everything I could.
Live site: http://tt.fbcwinterretreat.org/ Please note, to better understand what is happening, I recommend that you reduce the height of the window.
The problem is this: if you continue to look at the page, the carousel is going well, but if you go to another browser tab, wait a few seconds, and then go back, you will see that the carousel is crowded out. The longer you stay in another browser tab, the more it shifts.
The problem seems to come from this function:
function getRelativeClientRect(el) { var rect = el.getBoundingClientRect(), parentRect = el.offsetParent.getBoundingClientRect(); return { bottom: parentRect.bottom - rect.bottom, height: rect.height, left: rect.left - parentRect.left, right: parentRect.right - rect.right, top: rect.top - parentRect.top, width: rect.width }; }
which I got from this SO question: How to get the actual values for the left / right / top / bottom of an absolutely positioned element? .
The following are the HTML and codes for my site: HTML:
<div class='marquee-container'> <div class="image-container"> <div class="image" style="background-image:url('images/1.jpg')"></div> <div class="image" style="background-image:url('images/2.jpg')"></div> <div class="image" style="background-image:url('images/3.jpg')"></div> <div class="image" style="background-image:url('images/4.jpg')"></div> <div class="image" style="background-image:url('images/5.jpg')"></div> </div> </div>
CSS
.marquee-container{position:relative;overflow:hidden} .image-container{position:absolute;transition:all 1s ease; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;} .image{float:left;background-size:cover;cursor:pointer}
JS: There are two related JS scripts, the first of which is before closing the body tag, I use it so that the images automatically match the height of the screen
<script> (function(){ var width, height = true; function initHeader() { headerHeight = document.getElementById('rt-header')? document.getElementById('rt-header').getHeight():0; width = window.innerWidth; height = window.innerHeight - headerHeight; largeHeader = document.getElementById('rt-topfullwidth'); largeHeader.style.height = height+'px'; j('.marquee-container').height(height); j('.marquee-container .image').height(height); } </script>
The second second is at http://tt.fbcwinterretreat.org/templates/rt_chimera/js/custom.js , I use it to implement the carousel effect. I know that its readability is low, so I added a few comments to it.