Create a frontpage with a carousel slider showing the 10 most recent images

You will need:

• bootstrap_darkroom >= 1.1.3
• the AdditionalPages plug-in
• some (bootstrap carousel code)[http://getbootstrap.com/javascript/#carousel]
• a little bit of jQuery

1. Create a new page in AdditionalPages plugin
2. Use following content (see comments for hints on how to customize)

<!-- CSS style -->
<style type="text/css">
.navbar-secondary { display: none; }   /* hide the second navbar*/
.copyright { display: none; }          /* hide the footer */
.carousel { padding-top: 20px; }       
.item>a>img { margin: auto; }          /* center-align images in the slider */
.carousel-control { background: none !important; }
</style>

<!-- HTML code -->
<div id="last10items" class="carousel slide" data-ride="carousel">
  <!-- placeholder ol for the indicator bullets, remove if you don't want them -->
  <ol class="carousel-indicators">
  </ol>

  <!-- placeholder div for the carousel content -->
  <div class="carousel-inner" role="listbox">
  </div>

  <!-- the left/right buttons -->
  <a class="left carousel-control" href="#last10items" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#last10items" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<!-- Now, the jQuery voodoo -->
<script type="text/javascript">
/* we call the Piwigo API on our server to give us the 10 most recent images from all categories */
var pwg_api = "/ws.php?format=json&method=pwg.categories.getImages&recursive=true&per_page=10&recursive=true&order=date_available%20desc";
/* parse the result */
$.getJSON(pwg_api, function (json) {
    var images = json.result.images;

    /* loop over the results, and append the ol's and div's to above html skeleton */
    $.each( images, function ( i, image ) {
       console.log(image);
       var src = image.derivatives.large.url; /* replace large with xlarge, medium, square */
       var name = image.file;
       var link = image.page_url;
       if (i === 0) {
          $('.carousel-indicators').append('<li data-target="#last10items" data-slide-to="' + i + '" class="active"></li>');
          $('.carousel-inner').append('<div class="item active text-center"><a href="' + link + '"><img class="img-responsive" src="' + src + '"></img></a></div>');
       } else {
          $('.carousel-indicators').append('<li data-target="#last10items" data-slide-to="' + i + '"></li>');
          $('.carousel-inner').append('<div class="item text-center"><a href="' + link + '"><img class="img-responsive" src="' + src + '"></img></a></div>');
       }
    });
});
</script>