Bootstrap modal carousel

• Presentation
• Modal-carousel
  • Demo
  • Usage
• Carousel-fit
• Modal-local
• Modal-fullscreen
• More examples
• GitHub project

Purpose

The bootstrap-modal-carousel.js library is made to display a carousel in a fullscreen modal box. The slides fit automatically.

The script depends on bootstrap-modal-fullscreen, bootstrap-modal-local and bootstrap-carousel-fit libraries.

Demo

Display the carousel in fullscreen Display the carousel in a modal box

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Usage

1. Add the class name .modal-fullscreen and .force-fullscreen (to place header and footer away) to the modal box.
2. Add the class name .carousel-fit to the carousel.
3. On the controller that will open the modal, add the attribute data-local="#myCarousel" to target the carousel.

<link href="bootstrap-modal-carousel.css" rel="stylesheet" />

<script src="bootstrap-modal-carousel.js"/></script/>

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-local="#myCarousel">Demo</button>

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
      <div class="carousel-caption">
        <h3>First slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="item">
      <img data-src="holder.js/750x400/auto/#666:#444/text:Second slide" alt="Second slide">
      <div class="carousel-caption">
        <h3>Second slide label</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="item">
      <img data-src="holder.js/600x300/auto/#555:#333/text:Third slide" alt="Third slide">
      <div class="carousel-caption">
        <h3>Third slide label</h3>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

<div class="modal fade modal-fullscreen force-fullscreen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->