<!DOCTYPE html>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
title
>
jQuery pagePiling plugin for
Horizontal scroll
</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"jquery.pagepiling.css"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"examples.css"
/>
<
script
src
=
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.pagepiling.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$('#pagepilingDivID').pagepiling({
direction: 'horizontal',
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: [
'green', 'forestgreen', 'lime', 'white'],
navigation: {
'position': 'right',
'tooltips': [
'Page 1', 'Page 2', 'Page 3', 'Page 4']
},
});
});
</
script
>
<
style
>
#section1 img {
margin: 20px 0;
opacity: 0.7;
}
#colors2,
#colors3 {
position: absolute;
height: 150px;
width: 370px;
z-index: 1;
background-repeat: no-repeat;
left: 0;
margin: 0 auto;
right: 0;
}
#colors2 {
background-image: url(images/colors2.png);
top: 0;
}
#colors3 {
background-image: url(images/colors3.png);
bottom: 0;
}
</
style
>
</
head
>
<
body
>
<
ul
id
=
"menu"
>
<
li
data-menuanchor
=
"page1"
class
=
"active"
>
<
a
href
=
"#page1"
>Home</
a
>
</
li
>
<
li
data-menuanchor
=
"page2"
>
<
a
href
=
"#page2"
>About</
a
>
</
li
>
<
li
data-menuanchor
=
"page3"
>
<
a
href
=
"#page3"
>Tutorials</
a
>
</
li
>
</
ul
>
<
div
id
=
"pagepilingDivID"
>
<
div
class
=
"section"
id
=
"section1"
>
<
img
src
=
"images/background1.jpg"
alt
=
"pagePiling"
/>
<
br
/>
<
h1
>GFG Horizontal Scroll</
h1
>
<
p
>
pagePiling also provides
horizontal scrolling
</
p
>
</
div
>
<
div
class
=
"section"
>
<
div
class
=
"intro"
>
<
h1
>
Highly flexible and configurable
</
h1
>
<
p
>
Do the horizontal way of
scrolling and check!
</
p
>
</
div
>
</
div
>
<
div
class
=
"section"
id
=
"section3"
>
<
div
class
=
"intro"
>
<
h1
>
Very interactive for users
</
h1
>
<
p
>
Great idea to include in websites
</
p
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>