• Container divs ID can be anything but must have class="slide"
• Navigation links must have data-title equal to div ID minus # (see example)
• /!\ Make sure to set font-size on #menu a

index.html

<nav>
	<a href="#home" data-title="home">Home</a>
	<a href="#page_one" data-title="page_one">Page 1</a>
	<a href="#page_two" data-title="page_one">Page 2</a>
</nav>

<div id="container">
	<div id="home" class="slide">[ CONTENT ]</div>
	<div id="page_one" class="slide">[ CONTENT ]</div>
	<div id="page_two" class="slide">[ CONTENT ]</div>
</div>

custom.js, initialize 180

$(document).ready(function() {
	$('body')._180(options);
});

Read about the options in the next section

• menuPosition: [default: 'top'] the menu position can be top or bottom
• menuHeight: [default: 50] menu height in pixels
• menuAlign: [default: 'center'] menu links alignment, can be left, center or right
• menuStyle: [default: 'auto'] the menu style can be fill (take 100% of the window width) or auto
• menuSpacing: [default: 10] only if the menu style is set to auto, the spacing between links in pixels
• slidingpanelHeight: [default: 400] sliding panel height
• sidePadding: [default: 30] slides side paddings in pixels
• verticalScrolling: [default: true] set this to false to disable vertical scrolling on all the slides (to disable on a single slide, use class="noscroll")
• menuAnimation: [default: true] set this to false to disable the menu hover animation effect
• mouseScroll: [default: false] can be true only if verticalScrolling is disabled, it allows mousewheel navigation
• mobiles: use this to add mobile devices, separate them with |
• tablets: use this to add tablet devices, separate them with |
• tracker: [default: Google Analytics] function to track page views, can be customized, use variable activePage to fetch the active page
• before180: [function] use this to do something before the framework is initialized
• after180: [function] use this to do something after the framework has loaded
• beforeslide: [function] use this to do something before a page slide
• afterslide: [function] use this to do something after a page slide
• portrait: [function] use this to do something in portrait mode
• landscape: [function] use this to do something in landscape mode

• mobile
• tablet
• landscape
• portrait

• To add a header:

<div id="header">
	[ CONTENT ]
</div>

• To add a footer:

<div id="footer">
	[ CONTENT ]
</div>

• Add class="nopadding" to slide

• Add class="noscroll" to slide

By default, use <h2> to create a clickable title and <div> to create a collapsible block.

<div class="collapsible">
	<h2>[ BLOCK TITLE ]</h2>
	<div>[ CONTENT ]</div>
	<h2>[ BLOCK TITLE ]</h2>
	<div>[ CONTENT ]</div>
	<h2>[ BLOCK TITLE ]</h2>
	<div>[ CONTENT ]</div>
</div>

You can use your own HTML tags to define clickable titles and blocks

<div class="collapsible" data-options='{"title":"h3","block":"p"}'>
	<h3>[ BLOCK TITLE ]</h3>
	<p>[ CONTENT ]</p>
	<h3>[ BLOCK TITLE ]</h3>
	<p>[ CONTENT ]</p>
	<h3>[ BLOCK TITLE ]</h3>
	<p>[ CONTENT ]</p>
</div>

• Make sure to add width and height !

<div class="hovereffect">
	<img src="[ IMAGE ]" width="" height="" alt="" />
	<div class="hovertext">[ CONTENT ]</div>
</div>

1. Add this to any element: data-lightbox-width="[ WIDTH ]" data-lightbox-name="[ LIGHTBOX NAME ]" class="lightbox"
2. Create the lightbox content:

<div id="[ POPUP NAME ]" class="lightbox_content">[ LIGHTBOX CONTENT ]</div>

• Width and Height can be in percentage

<div class="slider" data-options='{"width":"[ WIDTH ]", "height":"[ HEIGHT ]", "loop":[ BOOLEAN ], "paginate":[ BOOLEAN ], "display":"[ INTEGER ]", "prev":"[ CUSTOM TEXT]", "next":"[ CUSTOM TEXT]"}'>
	<ul>
		<li>
			[ CONTENT ]
		</li>
		<li>
			[ CONTENT ]
		</li>
		<li>
			[ CONTENT ]
		</li>
		<li>
			[ CONTENT ]
		</li>
		<li>
			[ CONTENT ]
		</li>
	</ul>
</div>

• Add a span with class="caption" right after the image

<img src="[ IMAGE ]" alt="" />
<span class="caption">[ CAPTION ]</span>

• Or add class="caption" to an image to use its alt property as a caption

<img src="[ IMAGE ]" alt="[ CAPTION ]" class="caption" />

• Width and Height can be in percentage

<div class="scrollarea" data-options='{"width":"[ WIDTH ]", "height":"[ HEIGHT ]"}'>
	[ CONTENT ]
</div>

• Create a link with class="slidepanel" and add the following to your source code

<div id="slidingpanel">
	<div>
		[ CONTENT ]
	</div>
</div>

• Create a link with class="customlink" if you want it to be in the menu bar but if it's not a navigation link

• Add wmode=transparent to the URL

• iScroll 4: https://cubiq.org/iscroll-4/ "position:fixed" for mobiles
• jScrollpane: https://jscrollpane.kelvinluck.com/ pretty scrollbars
• jQuery mousewheel: https://brandonaaron.net/code/mousewheel/docs horizontal mousewheel navigation

• Laurent Le Graverend: For his support and ideas :D
• Keumbi
• Hello