Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta name="description" content="Bootstrap Carousel for Kirby" />
    <!-- CSS -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700" rel="stylesheet" type="text/css">
    <!-- Javascript -->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <title>Bootstrap Template</title>
  </head>
  
  <body>
    <!-- Help Area-->
    <nav class="alert navbar-default alert-dismissable highlvl">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <ul class="list-unstyled list-inline">
        <li><strong>Help:</strong></li>
        <li><a href="http://www.getbootstrap.com" target="_blank">Bootstrap</a></li>
        <li><a href="http://fontawesome.io/icons/" target="_blank">Font Awesome</a></li>
      </ul>
    </nav>
    
    <div class="flex">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
        <li data-target="#carousel-example-generic" data-slide-to="1">2</li>
        <li data-target="#carousel-example-generic" data-slide-to="2">3</li>
      </ol>
      
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <figure class="item active">
                <img src="http://ima.gs/fff/none/000/Picture01-1920x1080.png" class="img-responsive" />
                <figcaption id="slidecaption" class="slidecaption hidden-xs pull-right col-sm-3 col-md-3">
                    Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                </figcaption>
            </figure>
            <figure class="item">
                <img src="http://ima.gs/fff/none/000/Picture02-1920x1080.png" class="img-responsive" />
                <figcaption id="slidecaption" class="slidecaption hidden-xs pull-right col-sm-3 col-md-3">
                    Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                </figcaption>
            </figure>
            <figure class="item">
                <img src="http://ima.gs/fff/none/000/Picture03-1920x1080.png" class="img-responsive" />
                <figcaption id="slidecaption" class="slidecaption hidden-xs pull-right col-sm-3 col-md-3">
                    Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                </figcaption>
            </figure>
        </div>
    </div>
  </div>
    
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
janpro
0viewers