Skip to content

Embed a Carousel into the Jumbotron banner

Thomas Kuther edited this page Oct 22, 2017 · 2 revisions

Here's the how the jumbotron banner on the Demo page is done.

  1. Make sure the jumbotron is enabled in Administration -> Themes -> Bootstrap Darkroom config -> Jumbotron
  2. Use this code in Administration -> Configuration -> Options -> Banner
<style type="text/css">
/* dimensions */
#jumbotronCarousel {
    height: 200px;
}
#jumbotronCarousel .carousel-inner, 
.carousel-fade .carousel-inner .carousel-item {
    height: 100%;
}
#jumbotronCarousel .carousel-inner .carousel-item {
    padding-left: 10%;
}
#jumbotronCarousel .carousel-inner .carousel-item h1 {
    margin-top: 0px;
}
#jumbotronCarousel .carousel-control-prev,
#jumbotronCarousel .carousel-control-next {
    width: 5%;
}
.jumbotron {
    padding: 10px 0 10px;
}
#theHeader {
    height: 100%;
}
</style>
<div id="jumbotronCarousel" class="carousel carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active ">
            <h1>Bootstrap Darkroom</h1> 
            <p>A mobile-ready &amp; feature-rich theme for <a href="http://piwigo.org">Piwigo</a></p>
        </div>
        <div class="carousel-item">
            <h1>Modern features</h1> 
            <ul>
                <li><p>Fullscreen slideshow using <a href="http://photoswipe.com">PhotoSwipe</a>. </p></li>
                <li><p>Carousel album navigation on the picture page using <a href="http://kenwheeler.github.io/slick/">Slick</a></p></li>
                <li><p>Build-in support for HTML5 Video content.</p></li>
            </ul>
        </div>
        <div class="carousel-item">
            <h1>100% mobile device ready</h1>
            <ul>
                <li><p>One Theme. All features. On all devices. No compromises.</p></li>
                <li><p>Responsive layout, adjusts to the screen size.</p></li>
            </ul>
        </div>
        <div class="carousel-item">
            <h1>Customize and configure</h1> 
            <ul>
                <li><p>More than 30 color schemes, thanks to <a href="https://bootswatch.com">Bootswatch</a> and <a href="https://fezvrasta.github.io/bootstrap-material-design/">Material Design</a></p></li>
                <li><p>Most features are configurable in the backend.</p></li>
            </ul>
        </div>
    </div>
  <a class="carousel-control-prev" href="#jumbotronCarousel" role="button" data-slide="prev">
    <span class="fa fa-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#jumbotronCarousel" role="button" data-slide="next">
    <span class="fa fa-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
Clone this wiki locally