This time I will share jQuery Plugin and tutorial about Fullscreen Page Slider Plugin For jQuery – PageSwitch, hope it will help you in programming stack.
| File Size: | 7.02 KB |
|---|---|
| Views Total: | 3870 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
PageSwitch is a lightweight, responsive, fullscreen page slider when the users are able to switch between sectioned pages via mouse wheel, keyboard arrows or by clicking on the pagination bullets.
How to use it:
1. Add a group of page sections to the webpage as follows:
01 |
<div id="container" data-PageSwitch> |
02 |
<div class="sections"> |
03 |
<div class="section" id="section0"> |
04 |
<h3>This is the Page</h3> |
05 |
</div> |
06 |
<div class="section" id="section1"> |
07 |
<h3>This is the Page</h3> |
08 |
</div> |
09 |
<div class="section" id="section2"> |
10 |
<h3>This is the Page</h3> |
11 |
</div> |
12 |
<div class="section" id="section3"> |
13 |
<h3>This is the Page</h3> |
14 |
</div> |
15 |
</div> |
16 |
</div> |
2. Make the page sections fullscreen whenever you resize the browser window.
1 |
#container, .sections, .section { |
2 |
height: 100%; |
3 |
width: 100%; |
4 |
} |
5 |
6 |
.sections { position: absolute; } |
3. Put jQuery library and the main JavaScript file page.js at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="js/page.js"></script> |
4. Initialize the plugin to generate a default vertical page slider.
1 |
$("#container").PageSwitch() |
5. Apply custom styles to the slider controls.
01 |
.pages { |
02 |
position: fixed; |
03 |
list-style: none; |
04 |
} |
05 |
06 |
.vertical.pages { |
07 |
right: 15px; |
08 |
top: 50%; |
09 |
} |
10 |
11 |
.horizontal.pages { |
12 |
left: 50%; |
13 |
bottom: 15px; |
14 |
} |
15 |
16 |
.pages li { |
17 |
width: 8px; |
18 |
height: 8px; |
19 |
border-radius: 50%; |
20 |
background: #fff; |
21 |
margin: 10px 5px; |
22 |
cursor: pointer; |
23 |
} |
24 |
25 |
.horizontal.pages li { |
26 |
display: inline-block; |
27 |
vertical-align: middle; |
28 |
} |
29 |
30 |
.pages li.active { |
31 |
width: 14px; |
32 |
height: 14px; |
33 |
border: 2px solid #fffe00; |
34 |
margin: 10px 0px 10px 5px; |
35 |
background: none; |
36 |
margin-left: 0; |
37 |
} |
6. Default plugin options.
01 |
$("#container").PageSwitch({ |
02 |
03 |
// CSS selectors |
04 |
selectors: { |
05 |
sections: ".sections", |
06 |
section: ".section", |
07 |
page: ".pages", |
08 |
active: ".active" |
09 |
}, |
10 |
11 |
// index |
12 |
index: 0, |
13 |
14 |
// easing function |
15 |
easing: "ease", |
16 |
17 |
// duration in ms |
18 |
duration: 500, |
19 |
20 |
// infinite loop |
21 |
loop: false, |
22 |
23 |
// shows pagination |
24 |
pagination: true, |
25 |
26 |
// enables keyboard interactions |
27 |
keyboard: true, |
28 |
29 |
// or 'horizontal' |
30 |
direction: "vertical", |
31 |
32 |
// callback function |
33 |
callback: "" |
34 |
|
35 |
}) |
This awesome jQuery plugin is developed by Hasyou99. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
