<style type="text/css">
.navbar-contextual { display: none; }
.carousel-item {
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.carousel-caption a {
  font-family: 'Lato', sans-serif;
  color: #ddd;
  font-weight: 900;
  text-transform: full-width;
  text-decoration: none;
  text-shadow: -1px -1px 1px #aaa,
             0px 5px 2px rgba(0,0,0,0.5),
             5px 5px 6px rgba(0,0,0,0.7),
             0px 0px 8px rgba(0,0,0,0.4);
  font-size: 3rem;
  padding: 1rem 2rem;
  border-radius: 5px;
}
.carousel-indicators {
  bottom: 2rem;
  color: #ddd;
  font-weight: 800;
  border-radius: 2px;
}
.content-grid, .pt-3, .copyright {display:none;}
</style>
<div id="last10items" class="carousel carousel-fade" data-ride="carousel">
  <ol class="carousel-indicators">
  </ol>
  <div class="carousel-inner">
  </div>
  <a class="carousel-control-prev" href="#last10items" role="button" data-slide="prev">
    <span class="fa fa-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Précédent</span>
  </a>
  <a class="carousel-control-next" href="#last10items" role="button" data-slide="next">
    <span class="fa fa-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Suivant</span>
  </a>
</div>

<script type="text/javascript">
var pwg_root = '/';
var pwg_api = pwg_root + 'ws.php?format=json&method=pwg.categories.getImages&recursive=true&per_page=10&recursive=true&order=random';
function setHeights() {
    if ($('.jumbotron').length > 0) {
      var height = window.innerHeight - $('.navbar-main').outerHeight() - $('.jumbotron').outerHeight();
    } else {
      var height = window.innerHeight - $('.navbar-main').outerHeight();
    }
    var bottom = window.innerHeight - height + (height * 0.1);
    $('#last10items .carousel-inner').css('height', height);
    $('#last10items').find('.carousel-caption').css('bottom', bottom + 'px');
}
$.getJSON(pwg_api, function (json) {
    var images = json.result.images;
    $.each( images, function ( i, image ) {
       var src = image.derivatives.xlarge.url; /* replace large with preferred derivative size */
       var dheight = image.derivatives.xlarge.height; /* replace large with preferred derivative size */
       var name = image.file;
       var link = image.categories[0].page_url;
       if (i === 0) {
          $('#last10items .carousel-indicators').append('<li data-target="#last10items" data-slide-to="' + i + '" class="active"></li>');
          $('#last10items .carousel-inner').append('<div class="carousel-item active text-center" style="background-image: url(\'' + src + '\')"><div class="carousel-caption"><a href="/index.php?/categories">Ouvrez les yeux !</a></div></div>');
       } else {
          $('#last10items .carousel-indicators').append('<li data-target="#last10items" data-slide-to="' + i + '"></li>');
          $('#last10items .carousel-inner').append('<div class="carousel-item text-center" style="background-image: url(\'' + src + '\')"><div class="carousel-caption"><a href="/index.php?/categories">Ouvrez les yeux !</a></div></div>');
       }
    });
    $('#last10items').closest('.container').addClass('w-100 h-100 mx-0').removeClass('container');
    setHeights();
});

$(window).on('resize', function() {
  setHeights();
});
</script>