Custom fullscreen slider

by Tymoteusz Czech

HTML

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
  <!-- Indicators -->
    <div class="container">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li data-target="#carousel-example-generic" data-slide-to="0"><a href="#">First link <span class="sr-only">(current)</span></a></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"><a href="#">Next link</a></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"><a href="#">Last link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
 </div>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
       <div class="my-caption c1">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</div>
       <img src="http://loremflickr.com/g/800/600/sport,volleyball/all?r=1" alt="sport">
    </div>
    <div class="item">
       <div class="my-caption c2">Maecenas malesuada elit lectus felis, malesuada ultricies.</div>
      <img src="http://loremflickr.com/g/800/600/sport,volleyball/all?r=2" alt="sport">
    </div>
    <div class="item">
       <div class="my-caption c3">Curabitur et ligula. Ut molestie a, ultricies porta urna.</div>
      <img...

CSS

html, body, .carousel, .carousel-inner, .carousel-inner .item {
    width: 100%;
    height: 100%;

}
carousel .item {
    width:100%;
    height:auto;
}
.carousel-inner > .item > img {
  min-width:100%;
  height:auto;
}

.navbar {
    position: relative;
    top: 30px;
    z-index: 50;
    
}

.carousel-inner {
    position: absolute;
    top: 0;
}

.my-caption {
    position: absolute;
    color: black;
    top: 50%;
    left: 33%;
    max-width: 20%;
    background: rgba(255,255,255,0.66);
    padding: 1em;
    border-radius: 4px;
    transition: all 1s ease;
    opacity: 0;
}

.c2 {
    transform: translate(100px,0px);;
}
.c3 {
    transform: rotate3d(10,10,10,90deg);
}

.active > .my-caption {
    transform: rotate3d(0,0,0,0deg) translate(0,0);
    opacity: 1;
}