滑块高度图像

我有一个带缩略图的图像滑块，我有一点问题。 当您单击最后一个图像的缩略图时，下面的缩略图以及旋转木马中的箭头会稍微跳一下。 任何其他图像都不会发生这种情况。 这是一个小问题，但它让我发疯，我不知道为什么会发生这种情况，因为我确保所有的图像都是相同的高度。 这是codepen 。

$(document).ready(function(){ $('#imgDetail').animate({ opacity: '1' },300); }); $(document).ready(function(){ // get all images loaded var images = $(".unidoor-class"); // thumbnails containers var thumbnailContainer = $("#thumbnails"); // generate thumbnail images generateThumbnails(images, thumbnailContainer); // listeners for controls arrows $(".prev-next-button").on("click touchstart", function() { // get the images var currentImageIndex = images.index($(".unidoor-class[data-active=true]")); var isPrevious = $(this).hasClass("previous"); var nextIndex; if (isPrevious) { if (currentImageIndex === 0) { nextIndex = images.length - 1; } if (currentImageIndex > 0) { nextIndex = currentImageIndex - 1; } } else { if (currentImageIndex === images.length - 1) { nextIndex = 0; } if (currentImageIndex < images.length - 1) { nextIndex = currentImageIndex + 1; } } // remove any active class from images images.removeClass("active").attr('data-active', "false"); // get the next active image and add active class to that next current image var $nextImage = $(images[nextIndex]); if ($nextImage.data('iframe')) { $(images[nextIndex]).attr('data-active', "true"); $('#sketchfab-iframe').addClass('active').height($nextImage.height()); } else { $(images[nextIndex]).addClass("active").attr('data-active', "true"); $('#sketchfab-iframe').removeClass('active'); } }); $(".thumb").on("click touchstart", function(event){ event.preventDefault(); var images = $(".unidoor-class"); var indexSelected = $(this).data("img-index"); var currentShown = images.index($(".unidoor-class[data-active=true]")); if (currentShown === indexSelected) return false; images.removeClass("active").attr('data-active', "false"); if ($(this).data('iframe')) { $(images[indexSelected]).attr('data-active', "true"); $('#sketchfab-iframe').addClass('active').height($(images[indexSelected]).height()); } else { images.removeClass("active"); $(images[indexSelected]).addClass('active').attr('data-active', "true");; $('#sketchfab-iframe').removeClass('active'); } }); function generateThumbnails(images, container) { var ul = $("
"); images.each(function(index, element){ var currentThumb = $(""); var li = $("
"); var src = $(this).attr("src"); currentThumb.attr("src", src); currentThumb.attr("class", "thumb"); currentThumb.data("img-index", index); var iframe = $(this).data('iframe'); if (iframe) { currentThumb.data("iframe", iframe); } li.append(currentThumb); ul.append(li); }); container.append(ul); } }); // window.sr = ScrollReveal({reset: true}); // sr.reveal('.active', {mobile:true}); 

 * { margin: 0; padding: 0; } body{ margin: 0; padding:0; font-size: 100%; /* line-height: 1.6; */ /* font-family: Arial, Helvetica, sans-serif; */ /* height: 100% !important; */ } #green-room { background: #333 !important; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } #unidoor, .unidoor-class { position: absolute; width: 100%; margin: 0 auto; display: block; top: 0; left: 0; opacity: 0; transition: opacity .5s; height: auto; } .unidoor-class.active { position: relative; opacity: 1; } #prev { position: absolute; /* font-weight: bold; */ color: black; /* background-color: #fff; */ /* opacity: 0.5; */ left: 0; top: 0; bottom: 0; } #next { position: absolute; /* font-weight: bold; */ color: black; /* background-color: #fff; */ /* opacity: 0.5; */ right: 0; top: 0; bottom: 0; } #prev p, #next p { font-size: 3em; } #imgDetail { position: relative; width: 90%; /* width: 900px; height: 600px; */ margin: 0 auto; overflow: hidden; } #imgDetail a { text-decoration: none; display: flex; /* padding: 8px 16px; */ padding: 3% ; justify-content: center; align-items: center; } #imgDetail a:hover { background-color: #333; color: white; opacity: 0.5; } #imgDetail ul { margin: 0 auto; display: block; /* width: 50%; */ } #thumbnails { max-width: 1000px; width: 100%; display: inline-block; text-align: center; } .thumb { width: 21%; height: auto; /* margin: 15px 1% 0px 2%; */ margin-top: 15px; cursor: pointer; } #imgDetail li { display: inline; /* margin-right: 10px; */ } #thumbnails ul{ margin: 0 auto; display: block; } #thumbnails li{ display: inline; padding-right: 2%; } #thumbnails li:last-child{ padding-right: 0; } #green-room p { display: block; margin: 0 auto; /* font-size: 1em !important; */ } #green { padding-top: 15px; padding-bottom: 30px; text-align: center; color: white; font-family: 'Lato', sans-serif; margin: 0 auto; /* width: 100% !important;*/ } @media(max-width: 767px){ #green-room p { margin-right: 5% !important; margin-left: 5% !important; /* font-size: .75em !important; */ } #green { /* font-size: .75em !important; */ } } @media(min-width: 768px){ #green-room p { width: 90% !important; } #green { width: 90% !important; } } .footer { padding-top: 30px; background-color: #333; } #sketchfab-iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #sketchfab-iframe { width: 100%; height: 100%; opacity: 0; transition: opacity .5s; } #sketchfab-iframe.active { opacity: 1; position: relative; } 

              
 
       
❬ 
❭ 
  
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
   window.sr = ScrollReveal({reset: true}); sr.reveal('#unidoor');    

Answer 1

默认情况下，iframe是内联元素

添加风格

 display:block; 

对于

 #sketchfab-iframe.active { opacity: 1; position: relative; display: block;** } 

Codepen

更多信息， 请访问https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-if​​rame-element