test celostránkových bloků

by Petr Haluza

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div id="fullpage">

  <div class="section" id="sec1">
    <div class="slide" id="sec1slide1">
      <h1 class="glyphicon glyphicon-eye-open"></h1>
      <h1>test celostránkových bloků</h1>
      <p>s fullpage.js</p>
    </div>
    <div class="slide" id="sec1slide2"><h1>Slajd 2</h1></div>
    <div class="slide" id="sec1slide3"><h1>Slajd 3</h1></div>
  </div>

	<div class="section" id="sec2">sekce 2</div>

	<div class="section" id="sec3">
    <div class="slide" id="sec3slide1">Slajd 31</div>
    <div class="slide" id="sec3slide2">Slajd 32</div>
    <div class="slide" id="sec3slide3">Slajd 33</div>
  </div>

	<div class="section" id="sec4">sekce 4</div>
</div>

CSS

#sec1slide1 {  background-color: #ED1234;  background-image: url(https://www.bhmpics.com/walls/3d_low_poly_abstract-wide.jpg);  background-size: cover;  background-position: center;  text-align: center; color: #fff;}

#sec1slide2 {
  background-color: #12EDCC;  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/f5/51/5e/f5515ebe09ffd16984bb095d7917cbd0.jpg);  background-size: cover;  background-position: center;}

#sec1slide3 {  background-color: #EE12CC;  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/cb/82/75/cb8275fd84f67441ad7e21c81197d16d.png);  background-size: cover;  background-position: center;}

#sec2 {  background-color: #CCC;}
#sec4 {  background-color: #666;}
#fp-nav ul li a span {  background-color: #ED1234;}
.fp-slidesNav ul li a span {  background-color: #fff;}
.slide {  text-align: center;  color: #fff;}

JavaScript

$(document).ready(function() {
    $('#fullpage').fullpage({
      navigation : true,
      navigationPosition : 'right',
      navigationTooltips: ['x', 'y', 'z', '.'],
      slidesNavigation : true,
      slidesNavPosition : 'bottom',
      controlArrows: false,
    });
});