Title: Fullpage.js with jQuery Cycle
Tags: javascript;jquery;html;fullpage.js;jcycle
Question: im working on something that I need to use both Fullpage.js at jQuery Cycle at the same time. Now what I want to happen is to have multiple Fullpage that would slide if I click the navigation with jCycle. My javascript codes goes like this:
$(document).ready(function() {
$('#firstpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
scrollingSpeed: 1000
});
var titles = ['FirstPage','SecondPage'];
$('#list')
.before('<div id="nav"&gt;')
.cycle({
fx:     'scrollRight',
speed:  'fast',
timeout: 0,
pager:  '#nav',
pagerAnchorBuilder: function (index) {
return '<a href="#"&gt;' + titles[index] + '</a&gt;';
}
});
});
and my html
<div id="list"&gt;
<div&gt;
<div id="firstpage"&gt;
<div class="section " id="section0"&gt;
<img src="imgs/fullPage.png" alt="fullPage" /&gt;
</div&gt;
<div class="section" id="section1"&gt;
</div&gt;
<div class="section" id="section2"&gt;
<div class="intro"&gt;
<img src="imgs/example2.png" alt="example" /&gt;
</div&gt;
</div&gt;
<div class="section" id="section3"&gt;
<div class="intro"&gt;</div&gt;
<img src="imgs/tablets.png" alt="tablets" /&gt;
</div&gt;
</div&gt;
</div&gt;
<div&gt;
<div id="secondpage"&gt;
<div class="section" id="section4"&gt;
<img src="imgs/fullPage.png" alt="fullPage" /&gt;
</div&gt;
<div class="section" id="section5"&gt;
</div&gt;
<div class="section" id="section6"&gt;
<img src="imgs/example2.png" alt="example" /&gt;
</div&gt;
</div&gt;
</div&gt;
The firstpage is properly working but when is try to navigate for the secondpage scrolling is no longer working, but when I try to add something like this in the javascript, scrolling on both page is not working.
$('#secondpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
scrollingSpeed: 1000
});
Help me guys, thanks in advance..
Comment: You probably need to make use of some Cycle callback such as `after` and in there destroy the previous instance of fullpage.js to create another one. But of course, I haven't tried it and I'm not 100% sure it would work.

Comment: I think it will work with $('#list').fullpage({ }); for both he cases!

Comment: see it's working http://jsfiddle.net/ashuslove/6SQhb/303/

Comment: why you want to use two full pages, not able to work with sections?

Comment: that is achieved through sections within particualr DIV using singlle fullpage. http://alvarotrigo.com/fullPage/#firstPage

Comment: I tried it, its no good. thanks btw.

Comment: but i want to have another page, its working on single page or single fullpage, but when i try to have two fullpage, its no longer working..

Comment: I want to navigate multiple pages on one page. I just want to scrollright whenever the user click the navigation and display it on the same page.



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 8, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:02/05/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><fullpage.js><jcycle>', 'Title': 'Fullpage.js with jQuery Cycle', 'ViewCount': 53, 'id': 35216388, 'user_AboutMe': '', 'user_AccountId': 7717686.0, 'user_DisplayName': 'ivanhendrick', 'user_Reputation': 1.0, 'user_Views': 0.0, 'user_id': 5844857.0}}