Page Slider - OWL

by bizamajig

HTML

<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
  <header>
    Árvore #1000040
  </header>

  <div id="viewport" class="owl-carousel b-Chumbo">
    
    <div class="b-Amarelo">
      <h1>beginning</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
        <h1>ending</h1>
    </div>

    <div class="b-Verde">
      <h1>beginning</h1>
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
        
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
        
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
        
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
      <h1>2</h1>
        <h1>ending</h1>
        
    </div>

    <div class="b-Azul">
      <h1>beginning</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
        
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
      <h1>3</h1>
        <h1>ending</h1>
        
    </div>

    <div class="b-Vermelho">
      <h1>beginning</h1>
        <h1>ending</h1>
    </div>

  </div>

CSS

.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 10px;
	height: 10px;
	margin: 5px;

	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: #000;
	border: 1px solid transparent;

}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	filter: Alpha(Opacity=70);/*IE7 fix*/
	opacity: 0.7;
	background: transparent;
	border: 1px solid #000;

	width: 12px;
	height: 12px;

	margin-bottom: 4px;
}

.owl-theme .owl-controls{
	position: fixed;
	z-index: 100;

	top: 100%;
	left: 50%;
	margin: -10% 0 0 -2.8em;

	text-align: center;
}

.b-Branco {
	background: #fff;
}

.b-Amarelo {
	background: #fff484;
}

.b-Verde {
	background: #acf385;
}

.b-Azul {
	background: #76c1fe;
}

.b-Vermelho {
	background: #ff838b;
}

.b-Cinza {
	background: #f0f0ef;
}

.b-Chumbo {
	background: #4a4a4a;
}

header {
	position: fixed;

	width: 100%;
	height: 3em;

	z-index: 20;
	background: rgba(0,0,0, .75);
}

/* Viewport
/* * * * * * * * * * * * * * * * * * * * */
#viewport {
	position: relative;

	width: 100%;
	height: 100%;

}

JavaScript

$(document).ready(function() {
      
      // carousel setup
      $(".owl-carousel").owlCarousel({
        navigation : false,
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem: true,
        autoHeight: true,
        afterMove: top_align,
      });

      function top_align() {
        $(window).scrollTop(0);
        console.log('move');
      }

    });