滑块高度图像

Question

我有一个带缩略图的图像滑块，我遇到了一些问题。当您单击最后一个图像的缩略图时，下面的缩略图以及旋转木马中的箭头会稍微跳一下。任何其他图像都不会发生这种情况。这是一个小问题，但它让我发疯，我不知道为什么会发生这种情况，因为我确保所有的图像都是相同的高度。这是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 = $("<ul>");
    images.each(function(index, element){
      var currentThumb = $("<img>");
      var li = $("<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;
}

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Daniel Pollack</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
  </head>

  <body id="green-room">
    
<div class="slideshow-container">
  <div id="imgDetail">

    <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" data-active="true" />
    <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" data-active="false" />
    <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" data-active="false" />
    <img data-iframe="sketchfab-iframe" src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1243679/300/200/m2/fpnw/wm0/desert_04_01-.jpg?1462519267&s=294388259919b5be6294b07e96cda0b7" class="unidoor-class" data-active="false" />

    <iframe id="sketchfab-iframe" width="600" height="400" src="https://sketchfab.com/models/bbea52bd14c84d65b7b5512bae94ceac/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
    
    <!--CONTROLS-->
    <a href="javascript:void(0)" id="prev" class="prev-next-button previous"><p>&#10092;</p></a>
    <a href="javascript:void(0)" id="next" class="prev-next-button next"><p>&#10093;</p></a>
</div>
  
  <!--Thumbnails-->
  <div id="thumbnails">

  </div>

    
 <p id="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


<div class="footer">
    </div>
    
    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal({reset: true});
      sr.reveal('#unidoor');
    </script>
    
    </body>

</html>

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