Fullpage.js - Добавление страниц

Question

У меня возникли проблемы с выяснением того, как добавлять страницы (слайды), плагин поставляется с четырьмя, но мне нужно около 6 страниц.

Нужно ли мне возиться с элементами jquery или это можно сделать через css и html?

Заранее благодарен!

Answer 1

Это полный пример с шестью разделами и шестью слайдами. Пример в jsfiddle: fiddle

Html

<div class="section active" id="section0"><h1>Section 0</h1></div> 
<div class="section" id="section1"> 
    <div class="slide"> 
     <h1>Slide 1.js</h1> 
     <span class="toSlide" data-index="3">Click here to go to slide 3</span> 
    </div> 

    <div class="slide"> 
     <h1>Slide 2</h1> 
     <span class="toSlide" data-index="1">Click here to go to slide 1</span> 
    </div> 

    <div class="slide"> 
     <h1>Slide 3</h1> 
    </div> 

    <div class="slide"> 
     <h1>Slide 4</h1> 
    </div> 

    <div class="slide"> 
     <h1>Slide 5</h1> 
    </div> 


    <div class="slide"> 
     <h1>Slide 6</h1> 
    </div> 
</div> 
<div class="section" id="section2"><h1>Just testing section2</h1></div> 
<div class="section" id="section3"> <h1>Looks good section3</h1></div> 
<div class="section " id="section4"> <h1>Looks good section4</h1></div> 
<div class="section " id="section5"> <h1>Looks good section5</h1></div> 

CSS

body{ 
    color: #fff; 
} 
h1{ 
    font-size:3em; 
} 
.section { 
    text-align: center; 
} 
.section, .slide{ 
    background-color:#444; 
} 
#section0{ 
    background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe)); 
    background: -webkit-linear-gradient(#4BBFC3, #7BAABE); 
    background: linear-gradient(#4BBFC3,#7BAABE); 
} 
#section1{ 
    background: -webkit-gradient(linear, top left, bottom left, from(#7baabe), to(#969ac6)); 
    background: -webkit-linear-gradient(#7BAABE, #969AC6); 
    background: linear-gradient(#7BAABE,#969AC6); 
} 
#section2{ 
    background: -webkit-gradient(linear, top left, bottom left, from(#969ac6), to(#92a1ca)); 
    background: -webkit-linear-gradient(#969AC6, #92A1CA); 
    background: linear-gradient(#969AC6,#92A1CA); 
} 
#section3{ 
    background: -webkit-gradient(linear, top left, bottom left, from(#92a1ca), to(#76c2bd)); 
    background: -webkit-linear-gradient(#92A1CA, #76C2BD); 
    background: linear-gradient(#92A1CA,#76C2BD); 
} 

Javascript

$.fn.fullpage();