This time I will share jQuery Plugin and tutorial about Mobile-friendly Fullscreen Slider With Snap scrolling – snapslide, hope it will help you in programming stack.
snapslide is a small and mobile-friendly jQuery plugin to create a fullscreen page slider or one page scroll webpage that enables the user to move between slides via mouse wheel or touch swipe events.
The plugin takes advantage of CSS Scroll Snap to make the page automatically snap to the next or previous page while scrolling down or up the document.
How to use it:
1. To use this plugin, include the snapslide plugin and other required resources on the page.
1 |
< link rel = "stylesheet" href = "/path/to/dist/snapslide.min.css" /> |
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/dist/snapslide-min.js" ></ script > |
2. Add sections to the page slider.
01 |
< div class = "snap-container" > |
3. Create a vertical pagination to indicate on which page you’re viewing.
2 |
< li data-slide-link = "0" ></ li > |
3 |
< li data-slide-link = "1" ></ li > |
4 |
< li data-slide-link = "2" ></ li > |
4. Override the default styles of the section.
01 |
.snap-container section::before { |
11 |
display : inline- block ; |
14 |
background-position : center center ; |
15 |
background- size : cover; |
16 |
background-repeat : no-repeat ; |
17 |
-webkit-transition: opacity 2 s ease; |
18 |
-moz-transition: opacity 2 s ease; |
19 |
-ms-transition: opacity 2 s ease; |
20 |
-o-transition: opacity 2 s ease; |
21 |
transition: opacity 2 s ease; |
This awesome jQuery plugin is developed by kordianszust. For more Advanced Usages, please check the demo page or visit the official website.