Автоматическое определение высоты самого высокого изображения

Question

Я работаю с кодом для раздвижного баннера. https://jsfiddle.net/r4ht890f/

Вопрос 1) Я бы предпочел не устанавливать высоту через css для этого раздела и позволить javascript-коду фактически контролировать высоту раздела. Есть ли простой способ добавить код javascript, где он определяет высоту самого высокого изображения и каким-то образом устанавливает его так, чтобы изображение отображалось на странице. Прямо сейчас ничего не появляется, потому что высота не обнаруживается.

Вопрос 2) Единственное, что я хотел бы сделать с этим сценарием, - это то, что для последнего естественно вернуться к первому, чтобы сформировать цикл, а не возвращаться через все старые, чтобы вернуться к 1 .

#images_holder { 
    float: left; 
    width: 100%; 
} 
#moving_part { 
    width: 100%; 

} 
#moving_part > div { 
    position: relative; 
    width: 100%; 
    height: auto; 
    float: left; 
} 
#moving_part > div img{ 
    float: left; 
    width: 100%; 
    height: auto; 
} 
#prev, #next { 
    position: absolute; 
    cursor: pointer; 
    top:  47%; 
    display: none; /* hide initially */ 
    -webkit-user-select: none; 
      user-select: none; 
} 
#next{ 
    right: 0px; 
} 
#description{ 
    color:  #fff; 
    background: rgba(0,0,0,0.4); 
    text-align: center; 
    position: absolute; 
    padding: 15px; 
    right:  0; 
    left:  0; 
    display: none; /* hide initially */ 
} 

/* EXTRA: navigation */ 
#navigation{ 
    display: none; /* hide initially */ 
    position:absolute; 
    width:100%; 
    bottom:0; 
    text-align:center 
} 
#navigation span{ /* created by jQuery*/ 
    display:inline-block; 
    background: rgba(255,255,255,0.6); 
    cursor:pointer; 
    padding:4px 10px; 
} 

и вот Javascript

jQuery(function($){ 

    var efx = "slide", // "slide" || "fade" 
      animationTime = 600, 
      pauseTime = 4000, 
     $gal = $("#images_holder"), 
     $mov = $("#moving_part"), 
     $sli = $mov.find("> div"), 
     $btn = $("#prev, #next"), 
      $dsc = $("#description"), 
      $nav = $("#navigation"), // Our buttons parent 
      $navBtns, // Later, our SPAN buttons 
      spans = "", 
      w = $gal.width(), 
      n = $sli.length, 
      c = 0, // Counter // Start index 
      itv; // Interval 


for(var i=0; i<n; i++) {  // `n` is the number of slides! 
    spans += "<span>"+ (i+1) +"</span>"; 
} 
// Finally append our generated buttons: 
$nav.append(spans); 
// Retrieve the created buttons and do something on click 
$nav.find("span").on("click", function(){ 
    c = $(this).index(); // Set our counter to the clicked SPAN index 
    anim();    // Animate. That easy. 
}); 


    // SETUP (fade or slide?) 
    $mov.width(w*n); 
    if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0); 

    function populateDescription() { 
     $dsc.text($sli.eq(c).find("img").attr("alt")); 
    } 

    function anim() { 
     c = c<0 ? n-1 : c%n; // loop-back if exceedds 
     populateDescription(); 
     if (efx==="fade") { 
      $sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime); 
     }else if(efx==="slide") { 
      $mov.stop().animate({left: -c*w}); 
     } 
    } 

    function auto() { 
     $btn.add($dsc).add($nav).stop().fadeOut(); // Hide UI 
     itv = setInterval(function(){ 
      ++c; 
      anim(); 
     }, pauseTime); 
    } 

    function pause() { 
    $btn.add($dsc).add($nav).stop().fadeIn(); // Show UI 
     return clearInterval(itv); 
    } 

    $gal.hover(pause, auto); 

    $btn.on("click", function(){ 
     c = this.id==="next" ? ++c : --c; 
     anim(); 
    }); 


    populateDescription(); 
    auto(); 

}); 

<div id="images_holder"> 
      <div id="moving_part"> 
       <div> 
        <a href="You-Belong"> 
<img src="images/For-Smithfield-Slider-600x232.png" 
srcset=" 
images/For-Smithfield-Slider-1000x387.png 1000w, 
images/For-Smithfield-Slider-1920x743.png 1920w, 
images/For-Smithfield-Slider-2880x1114.png 2880w 
" alt=""/> 
</a> 
       </div> 
       <div> 
        <a href="You-Belong"> 
<img alt="" src="images/You-Belong-Here-Slider1.png"></a> 
       </div> 
       <div> 
        <img alt="" src="images/Vision-Statement-01.png"> 
       </div> 
      </div> 

      <div id="prev">PREV</div> 
      <div id="next">NEXT</div> 
      <div id="description">Test</div> 
      <div id="navigation"></div> 
     </div> 

Это Ф.О. r активный проект, над которым я работаю и для обучения. Раньше я никогда не делал ничего подобного. Любая помощь была бы замечательной!

Answer 1

Может быть, это поможет на вопрос 1: Equals heights of thumbnails

добавить пользовательский класс изображений и что код должен работать изменения .thumbnail в .yourcustomclass.