Bloquer la hauteur d'un slideshow

by oilvier

HTML

<script src="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.js"></script>
<script src="https://rawgit.com/WickyNilliams/enquire.js/master/dist/enquire.min.js"></script>
<script src="https://rawgit.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js"></script>
<script src="https://rawgit.com/scottjehl/picturefill/master/dist/picturefill.min.js"></script>
<div class="foo">
  <div class="diaporama-wrapper">
    <ul class="diaporama js-diaporama">
      <li><img src="//placehold.it/228x114/d90c0c/FFFFFF" alt=""></li>
      <li><img src="//placehold.it/228x114/038b19/FFFFFF" alt=""></li>
      <li><img src="//placehold.it/228x114/210aad/FFFFFF" alt=""></li>
    </ul>
  </div>
</div>

<!-- Sans l'optimisation -->
<div class="foo">
  <ul class="diaporama js-diaporama">
      <li><img src="//placehold.it/228x114/d90c0c/FFFFFF" alt=""></li>
      <li><img src="//placehold.it/228x114/038b19/FFFFFF" alt=""></li>
      <li><img src="//placehold.it/228x114/210aad/FFFFFF" alt=""></li>
    </ul>
</div>

SCSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

.bx-viewport li {
  min-height: 1px;
  min-width: 1px;
}

.bx-button button {
  padding: 0;
  background: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align:bottom;
}

html,
body {
  height: 100%;
}

.foo {width:228px; float:left; border:2px solid tomato;}


$ratio-slideshow:114/228;
.diaporama-wrapper {position:relative;
    /**
		 * 1. Afin d'éviter un affichage temporaire de tous les slides
		 * au chargement de la page, on bloque la hauteur du slideshow 
		 * en utilisant la technique du ratio intrinsèque
		 * 2. On force les slides à prendre toute la largeur & hauteur disponible
		 */
		.js & {padding-bottom:percentage($ratio-slideshow); height:0; overflow:hidden; /* [1] */
			.diaporama {position:absolute; top:0; right:0; bottom:0; left:0;} /* [2] */

			/* Une fois le slideshow chargé, la hauteur est de nouveau définie en fonction du contenu */
			&.is-loaded {padding-bottom:0; overflow:visible; height:auto;
				.diaporama {position:static;}
			}
		}
  
}

JavaScript

$('.js-diaporama').bxSlider({
  pager:false,
  onSliderLoad: function() {
    $('.diaporama-wrapper').addClass("is-loaded");
  }
});