<div data-type="component-text" data-preview="editor/snippets/default/preview/imgslider1.png"  data-keditor-title="Slider" data-keditor-categories="Slider;Banner">
<style>

.jk-slider{
    width:100%;
}
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}
</style>

    <div class="jk-slider">
    <div id="carousel-example" class="carousel slide" data-ride="carousel"  >
  <ol class="carousel-indicators">
    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example" data-slide-to="1"></li>
    <li data-target="#carousel-example" data-slide-to="2"></li>
  </ol>

 

  <div class="carousel-inner">
    <div class="item active">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
        <div class="hero">
        <hgroup>
            <h1>Search for</h1>        
            <h3>the books you need and save ! </h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
        </hgroup>
        
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="hero">
        <hgroup>
            <h1>Search for</h1>        
            <h3>the books you need and save ! </h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
        </hgroup>
        
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="hero">
        <hgroup>
            <h1>Search for</h1>        
            <h3>the books you need and save ! </h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
        </hgroup>
        
      </div>
    </div>
  </div>

  <div id="arrows" class="jk-slider">
  <a class="left carousel-control" data-cke-survive="true" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" data-cke-survive="true"></span>
  </a>
  <a class="right carousel-control data-cke-survive" data-cke-survive="true" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" data-cke-survive="true"></span>
  </a>
  </div>

</div>
    
</div>
</div>