Film Roll: Full Screen

Configuration

To configure FilmRoll as a full screen carousel where content fills the height of the browser, do the following:

• Using CSS, use the following sytling:

  #film_roll, div.film_roll_child {
    height: 100%;
  }
  div.film_roll_child img {
    height: 100%;
    max-width: none;
    max-height: 100%;
  }
  div.film_roll_wrapper { overflow-x: hidden; }
  

  This code assumes you have images inside child divs.
• If you place borders or shadows on the child, you will have better success if you turn on box-sizing:

  div.film_roll_children {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  

• Do not pass a height when you instantiate the FilmRoll:

  var film_roll = new FilmRoll({
        container: '#film_roll',
      });

• If you leave the pager enabled, you'll want to bump it back up with CSS:

  .film_roll_pager {
        position: relative;
        top: -20px;
      }

Return to FilmRoll Close