Making a fullscreen image slider

We already know videos in webpage offers a button to make the video view-able in full-screen mode. It will be really nice if we can make our high quality image slider to be presented in full-screen.

In this small tutorial we will see making the slider full-screen.

To make my demo easy, I took basic image slider from bootstrap.

1. Prepare a bootstrap image slider

At this point I am assuming that you know how to initialize bootstrap to your web page. If not visit bootstrap's getting started (Basic Template) section and checkout hello world example

After creating basic bootstrap template, create a basic carousel like below

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://images.unsplash.com/photo-1443527216320-7e744084f5a7" alt="...">
      <div class="carousel-caption">

      </div>
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1441973270863-189a40107d80" alt="...">
      <div class="carousel-caption">

      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Once you have basic carousel working now add a button to your webpage like below

<button id="fullscreen" class="btn btn-lg btn-block btn-success">FULL SCREEN</button>

HTML part for making fullscreen is ready.

2. Write JavaScript code to make the slider full-screen

Now that we have complete html ready, now it just a matter of handling click function of the button that was added in previous step.

Add the below javascript to your webpage

 var element = document.getElementById("carousel-example-generic");

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else {
        element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.getElementById("fullscreen").addEventListener("click", function(e) {

      toggleFullScreen();

  });

What we are doing here is, calling toggleFullscreen method which will make the slider to occupy full width of the screen.

Thats it, now click on the Fullscreen button that we have created in step1 , the image slider will occupy full width of device.