Replaced clones of slick and smooth-scroll with submodules.
This commit is contained in:
archshift
parent
0be334426c
commit
dd3b28f0a8
6
.gitmodules
vendored
Normal file
6
.gitmodules
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
[submodule "scripts/slick"]
|
||||||
|
path = scripts/slick
|
||||||
|
url = https://github.com/kenwheeler/slick
|
||||||
|
[submodule "scripts/smooth-scroll"]
|
||||||
|
path = scripts/smooth-scroll
|
||||||
|
url = https://github.com/cferdinandi/smooth-scroll
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Citra - Experimental 3DS Emulator</title>
|
<title>Citra - Experimental 3DS Emulator</title>
|
||||||
<link rel="stylesheet" type="text/css" href="scripts/slick-1.3.9/slick/slick.css"/>
|
<link rel="stylesheet" type="text/css" href="scripts/slick/slick/slick.css"/>
|
||||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
<noscript><link rel="stylesheet" type="text/css" href="noscript.css" /></noscript>
|
<noscript><link rel="stylesheet" type="text/css" href="noscript.css" /></noscript>
|
||||||
|
|
||||||
@ -128,7 +128,7 @@
|
|||||||
|
|
||||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||||
<script type="text/javascript" src="scripts/slick-1.3.9/slick/slick.min.js"></script>
|
<script type="text/javascript" src="scripts/slick/slick/slick.min.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
smoothScroll.init({
|
smoothScroll.init({
|
||||||
|
|||||||
1
scripts/slick
Submodule
1
scripts/slick
Submodule
@ -0,0 +1 @@
|
|||||||
|
Subproject commit ef16dc13ebdd0d0a8776b24c5cf19b3178d0e879
|
||||||
1
scripts/slick-1.3.9/.gitignore
vendored
1
scripts/slick-1.3.9/.gitignore
vendored
@ -1 +0,0 @@
|
|||||||
.sass-cache
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
The MIT License (MIT)
|
|
||||||
|
|
||||||
Copyright (c) 2013
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
||||||
this software and associated documentation files (the "Software"), to deal in
|
|
||||||
the Software without restriction, including without limitation the rights to
|
|
||||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
||||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
|
||||||
subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
||||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
||||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
||||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
||||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
|
|
||||||
build: components slick.js slick.css
|
|
||||||
@component build --dev
|
|
||||||
|
|
||||||
components: component.json
|
|
||||||
@component install --dev
|
|
||||||
|
|
||||||
.PHONY: clean
|
|
||||||
@ -1,143 +0,0 @@
|
|||||||
slick
|
|
||||||
-------
|
|
||||||
|
|
||||||
[1]: <https://github.com/kenwheeler/slick>
|
|
||||||
|
|
||||||
_the last carousel you'll ever need_
|
|
||||||
|
|
||||||
#### Demo
|
|
||||||
|
|
||||||
[http://kenwheeler.github.io/slick](http://kenwheeler.github.io/slick/)
|
|
||||||
|
|
||||||
#### CDN
|
|
||||||
|
|
||||||
CDN hosted slick is a great way to get set up quick:
|
|
||||||
|
|
||||||
In your ```<head>``` add:
|
|
||||||
|
|
||||||
````
|
|
||||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.8/slick.css"/>
|
|
||||||
````
|
|
||||||
|
|
||||||
Then, before your closing ```<body>``` tag add:
|
|
||||||
|
|
||||||
```
|
|
||||||
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.8/slick.min.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Bower
|
|
||||||
|
|
||||||
````
|
|
||||||
bower install --save slick.js
|
|
||||||
````
|
|
||||||
|
|
||||||
#### Options
|
|
||||||
|
|
||||||
Option | Type | Default | Description
|
|
||||||
------ | ---- | ------- | -----------
|
|
||||||
accessibility | boolean | true | Enables tabbing and arrow key navigation
|
|
||||||
autoplay | boolean | false | Enables auto play of slides
|
|
||||||
autoplaySpeed | int | 3000 | Auto play change interval
|
|
||||||
centerMode | boolean | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
|
|
||||||
centerPadding | string | '50px' | Side padding when in center mode. (px or %)
|
|
||||||
cssEase | string | 'ease' | CSS3 easing
|
|
||||||
customPaging | function | n/a | Custom paging templates. See source for use example.
|
|
||||||
dots | boolean | false | Current slide indicator dots
|
|
||||||
dotsClass | string | 'slick-dots' | Class for slide indicator dots container
|
|
||||||
draggable | boolean | true | Enables desktop dragging
|
|
||||||
easing | string | 'linear' | animate() fallback easing
|
|
||||||
fade | boolean | false | Enables fade
|
|
||||||
arrows | boolean | true | Enable Next/Prev arrows
|
|
||||||
appendArrows | string | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
|
|
||||||
appendDots | string | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
|
|
||||||
prevArrow | string (html|jQuery selector) | object (DOM node|jQuery object) | <button type="button" class="slick-prev">Previous</button> | Allows you to select a node or customize the HTML for the "Previous" arrow.
|
|
||||||
nextArrow | string (html|jQuery selector) | object (DOM node|jQuery object) | <button type="button" class="slick-next">Next</button> | Allows you to select a node or customize the HTML for the "Next" arrow.
|
|
||||||
infinite | boolean | true | Infinite looping
|
|
||||||
lazyLoad | string | 'ondemand' | Accepts 'ondemand' or 'progressive' for lazy load technique
|
|
||||||
onBeforeChange(this, currentIndex,targetIndex) | method | null | Before slide change callback
|
|
||||||
onAfterChange(this, index) | method | null | After slide change callback
|
|
||||||
onInit(this) | method | null | When Slick initializes for the first time callback
|
|
||||||
onReInit(this) | method | null | Every time Slick (re-)initializes callback
|
|
||||||
pauseOnHover | boolean | true | Pauses autoplay on hover
|
|
||||||
pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered
|
|
||||||
responsive | object | null | Breakpoint triggered settings
|
|
||||||
slide | string | 'div' | Slide element query
|
|
||||||
slidesToShow | int | 1 | # of slides to show at a time
|
|
||||||
slidesToScroll | int | 1 | # of slides to scroll at a time
|
|
||||||
speed | int | 300 | Transition speed
|
|
||||||
swipe | boolean | true | Enables touch swipe
|
|
||||||
swipeToSlide | boolean | false | Swipe to slide irrespective of slidesToScroll
|
|
||||||
touchMove | boolean | true | Enables slide moving with touch
|
|
||||||
touchThreshold | int | 5 | To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
|
|
||||||
useCSS | boolean | true | Enable/Disable CSS Transitions
|
|
||||||
variableWidth | boolean | false | Disables automatic slide width calculation
|
|
||||||
vertical | boolean | false | Vertical slide direction
|
|
||||||
rtl | boolean | false | Change the slider's direction to become right-to-left
|
|
||||||
waitForAnimate | boolean | true | Ignores requests to advance the slide while animating
|
|
||||||
|
|
||||||
|
|
||||||
#### Methods
|
|
||||||
|
|
||||||
Method | Argument | Description
|
|
||||||
------ | -------- | -----------
|
|
||||||
slick() | options : object | Initializes Slick
|
|
||||||
unslick() | | Destroys Slick
|
|
||||||
slickNext() | | Triggers next slide
|
|
||||||
slickPrev() | | Triggers previous slide
|
|
||||||
slickPause() | | Pause Autoplay
|
|
||||||
slickPlay() | | Start Autoplay
|
|
||||||
slickGoTo() | index : int | Goes to slide by index
|
|
||||||
slickCurrentSlide() | | Returns the current slide index
|
|
||||||
slickAdd() | element : html or DOM object, index: int, addBefore: bool | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object
|
|
||||||
slideRemove() | index: int, removeBefore: bool | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
|
|
||||||
slickFilter() | filter : selector or function | Filters slides using jQuery .filter syntax
|
|
||||||
slickUnfilter() | | Removes applied filter
|
|
||||||
slickGetOption(option) | option : string(option name) | Gets an option value.
|
|
||||||
slickSetOption(option,value,refresh) | option : string(option name), value : depends on option, refresh : boolean | Sets an option live. Set refresh to true if it is an option that changes the display
|
|
||||||
|
|
||||||
|
|
||||||
#### Example
|
|
||||||
|
|
||||||
Initialize with:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
$(element).slick({
|
|
||||||
dots: true,
|
|
||||||
speed: 500
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
Destroy with:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
$(element).unslick();
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
#### Sass Variables
|
|
||||||
|
|
||||||
Variable | Type | Default | Description
|
|
||||||
------ | ---- | ------- | -----------
|
|
||||||
$slick-font-path | string | "./fonts/" | Directory path for the slick icon font
|
|
||||||
$slick-font-family | string | "slick" | Font-family for slick icon font
|
|
||||||
$slick-loader-path | string | "./" | Directory path for the loader image
|
|
||||||
$slick-arrow-color | color | white | Color of the left/right arrow icons
|
|
||||||
$slick-dot-color | color | black | Color of the navigation dots
|
|
||||||
$slick-dot-color-active | color | $slick-dot-color | Color of the active navigation dot
|
|
||||||
$slick-prev-character | string | '\2190' | Unicode character code for the previous arrow icon
|
|
||||||
$slick-next-character | string | '\2192' | Unicode character code for the next arrow icon
|
|
||||||
$slick-dot-character | string | '\2022' | Unicode character code for the navigation dot icon
|
|
||||||
$slick-dot-size | pixels | 6px | Size of the navigation dots
|
|
||||||
|
|
||||||
|
|
||||||
#### Dependencies
|
|
||||||
|
|
||||||
jQuery 1.7
|
|
||||||
|
|
||||||
#### License
|
|
||||||
|
|
||||||
Copyright (c) 2014 Ken Wheeler
|
|
||||||
|
|
||||||
Licensed under the MIT license.
|
|
||||||
|
|
||||||
Free as in Bacon.
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "slick-carousel",
|
|
||||||
"main": ["slick/slick.min.js", "slick/slick.css"],
|
|
||||||
"version": "1.3.9",
|
|
||||||
"homepage": "https://github.com/kenwheeler/slick",
|
|
||||||
"authors": [
|
|
||||||
"Ken Wheeler <ken_wheeler@me.com>"
|
|
||||||
],
|
|
||||||
"description": "the last carousel you'll ever need",
|
|
||||||
"keywords": [
|
|
||||||
"responsive",
|
|
||||||
"carousel",
|
|
||||||
"jquery"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"ignore": [
|
|
||||||
"**/.*",
|
|
||||||
"node_modules",
|
|
||||||
"bower_components",
|
|
||||||
"test",
|
|
||||||
"tests",
|
|
||||||
"index.html"
|
|
||||||
],
|
|
||||||
"dependencies": {
|
|
||||||
"jquery": ">=1.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "slick",
|
|
||||||
"repo": "kenwheeler/slick",
|
|
||||||
"description": "the last carousel you'll ever need",
|
|
||||||
"version": "1.3.9",
|
|
||||||
"keywords": ["ui", "jquery", "carousel", "responsive", "slider"],
|
|
||||||
"dependencies": {
|
|
||||||
"component/jquery": "*"
|
|
||||||
},
|
|
||||||
"development": {},
|
|
||||||
"scripts": {
|
|
||||||
"slick/slick.js": "slick.js"
|
|
||||||
},
|
|
||||||
"styles": {
|
|
||||||
"slick/slick.css": "slick.css"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 188 KiB |
Binary file not shown.
Binary file not shown.
@ -1,92 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: 'Pacifico';
|
|
||||||
src: url('pacifico.eot');
|
|
||||||
src: url('pacifico.eot?#iefix') format('embedded-opentype'),
|
|
||||||
url('pacifico.woff') format('woff'),
|
|
||||||
url('pacifico.ttf') format('truetype'),
|
|
||||||
url('pacifico.svg#Pacifico') format('svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
#disqus_thread{margin-top:20px;}
|
|
||||||
*{-moz-box-sizing:border-box;box-sizing:border-box;}
|
|
||||||
.blue{background:#3498db;color:#fff;}
|
|
||||||
.blue h3{background:#fff;color:#3498db;font-size:36px;line-height:100px;margin:10px;padding:2%;position:relative;text-align:center;}
|
|
||||||
.button{background:#3498db;color:#fff;display:block;font-size:16px;margin:20px auto;padding:20px;text-align:center;text-decoration:none;width:48%;}
|
|
||||||
.buttons{padding:0 20px 20px; margin-bottom: 10px;}
|
|
||||||
.buttons .button{background:#FFF;color:#3498db;float:left;margin:5px;}
|
|
||||||
.center .slick-center h3{-moz-transform:scale(1.08);-ms-transform:scale(1.08);-o-transform:scale(1.08);-webkit-transform:scale(1.08);color:#e67e22;opacity:1;transform:scale(1.08);}
|
|
||||||
.center h3{opacity:0.8;transition:all 300ms ease;}
|
|
||||||
.content{margin:auto;padding:20px;width:600px;}
|
|
||||||
.content:after,.buttons::after{clear:both;content:"";display:table;}
|
|
||||||
.destroy{font-weight:400;margin-top:40px;}
|
|
||||||
.features{display:block;list-style-type:none;margin-top:30px;padding:0;text-align:center;}
|
|
||||||
.features li{margin:20px 0;}
|
|
||||||
.filter .button{background:#FFF;color:#3498db; margin-bottom: 40px;}
|
|
||||||
.fixed-header{background:#FFF;box-shadow:2px 0 5px rgba(0,0,0,0.5);display:none;padding:10px;position:fixed;top:0;width:100%;z-index:10000;}
|
|
||||||
.fixed-header .header-content{margin:auto;width:600px;}
|
|
||||||
.fixed-header .subheading{display:none;}
|
|
||||||
.fixed-header h1.title{float:left;font-size:24px;margin:0;}
|
|
||||||
.fixed-header ul.nav{float:right;margin:0;padding:5px;}
|
|
||||||
.fixed-header ul.nav li{margin:0 0 0 10px;}
|
|
||||||
.header{padding:20px 0;}
|
|
||||||
.margin-40{margin-bottom:40px;}
|
|
||||||
.more,.button.first{margin-top:40px;}
|
|
||||||
.red{background:#e74c3c;color:#fff;}
|
|
||||||
.slick-slide .image{padding:10px;}
|
|
||||||
.slick-slide img{border:5px solid #FFF;display:block;width:100%;}
|
|
||||||
.slick-slide img.slick-loading{border:0 }
|
|
||||||
.slick-slider{margin:30px auto 50px;}
|
|
||||||
.subheading{color:#555;font-size:12px;font-style:italic;font-weight:400;margin:10px auto;text-align:center;}
|
|
||||||
.white{background:#fff;color:#3498db;}
|
|
||||||
.white pre,.white hr{background:#3498db;}
|
|
||||||
a{color:#3498db;}
|
|
||||||
body,html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:#fff;font-family:'Lucida Grande', sans-serif;height:100%;line-height:1;margin:0;padding:0;text-rendering:optimizeLegibility;width:100%;}
|
|
||||||
code{color:#000; overflow-x: scroll;}
|
|
||||||
h1{color:#3498db;font-family:Pacifico;font-size:72px;font-weight:400;line-height:1.2;margin:0 auto 10px;text-align:center;}
|
|
||||||
h1.title{font-size:96px;}
|
|
||||||
h2{font-family:Pacifico;font-size:36px;margin:20px auto;text-align:center;}
|
|
||||||
h4{font-family:Pacifico;font-size:28px;margin:20px auto;text-align:center;}
|
|
||||||
hr{background:#fff;border:0;height:1px;margin:40px 0;}
|
|
||||||
p{font-size:18px;font-weight:700;line-height:1.5;margin-bottom:40px;text-align:center;}
|
|
||||||
p.note{font-size: 12px;}
|
|
||||||
p.cdn{font-size: 14px;}
|
|
||||||
p.guff{font-size:16px;}
|
|
||||||
pre{background:#fff;margin:0 10px 20px;padding:10px;}
|
|
||||||
section{width:100%;}
|
|
||||||
table{font-size:14px;line-height:18px;margin:40px auto 20px; display: block; float: left;}
|
|
||||||
tr { width: 100%; border-right: none; border-bottom: 1px solid #fff; margin: 0px 0px 20px; padding: 0px 0px 20px; background: transparent; float: left; }
|
|
||||||
thead { display: none; }
|
|
||||||
td { border: 0; padding: 10px 0px;}
|
|
||||||
td,tbody { display: block; width: 100% !important;}
|
|
||||||
table.settings td:nth-of-type(1), table.methods td:nth-of-type(1){font-weight: bold; font-size: 16px; line-height: 18px;}
|
|
||||||
table.settings td:nth-of-type(2):before{content: 'Type: '; font-weight: bold;}
|
|
||||||
table.settings td:nth-of-type(3):before{content: 'Default: '; font-weight: bold;}
|
|
||||||
table.methods td:nth-of-type(2):before{content: 'Arguments: '; font-weight: bold;}
|
|
||||||
ul.nav{margin-bottom:0;padding-left:0;text-align:center;}
|
|
||||||
ul.nav li{display:inline-block;list-style-type:none;margin:0 20px;}
|
|
||||||
ul.nav li a{font-size:12px;text-decoration:none;}
|
|
||||||
@media (max-width: 420px) {
|
|
||||||
ul.nav li a{display:block;font-size:10px;}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.blue h3{font-size:24px;}
|
|
||||||
.button{margin:0 auto 20px;width:auto;}
|
|
||||||
.button.first{margin-top:40px;}
|
|
||||||
.buttons{padding:0 0 20px;}
|
|
||||||
.buttons .button{float:left;font-size:12px;margin:1%;width:48%;}
|
|
||||||
.center{margin-left:-40px;margin-right:-40px;}
|
|
||||||
.center .slick-center h3{-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);color:#e67e22;opacity:1;transform:scale(1);}
|
|
||||||
.center h3{-moz-transform:scale(0.95);-ms-transform:scale(0.95);-o-transform:scale(0.95);-webkit-transform:scale(0.95);opacity:0.8;transform:scale(0.95);transition:all 300ms ease;}
|
|
||||||
.content{margin:auto;padding:20px 40px;width:auto;}
|
|
||||||
.fixed-header .header-content{width:auto;}
|
|
||||||
pre{font-size:12px; overflow-x: scroll;}
|
|
||||||
table{font-size:14px;line-height:18px;margin:40px auto 20px; display: block; float: left;}
|
|
||||||
tr { width: 100%; border-right: none; border-bottom: 1px solid #fff; margin: 0px 0px 20px; padding: 0px 0px 20px; background: transparent; float: left; }
|
|
||||||
thead { display: none; }
|
|
||||||
td { border: 0; padding: 10px 0px;}
|
|
||||||
td,tbody { display: block; width: 100% !important;}
|
|
||||||
table.settings td:nth-of-type(1), table.methods td:nth-of-type(1){font-weight: bold; font-size: 16px; line-height: 18px;}
|
|
||||||
table.settings td:nth-of-type(2):before{content: 'Type: '; font-weight: bold;}
|
|
||||||
table.settings td:nth-of-type(3):before{content: 'Default: '; font-weight: bold;}
|
|
||||||
table.methods td:nth-of-type(2):before{content: 'Arguments: '; font-weight: bold;}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@ -1,847 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>slick - the last carousel you'll ever need</title>
|
|
||||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/styles/monokai.min.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
|
||||||
<meta name="description" content="slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!">
|
|
||||||
<meta name="keywords" content="slick, responsive, carousel, slider, jQuery, plugin, CSS3, swipe, touch">
|
|
||||||
<!-- Open Graph -->
|
|
||||||
<meta property="og:title" content="slick - the last carousel you'll ever need" />
|
|
||||||
<meta property="og:description" content="slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!" />
|
|
||||||
<meta property="og:type" content="article" />
|
|
||||||
<meta property="og:url" content="http://kenwheeler.github.io/slick/" />
|
|
||||||
<meta property="og:image" content="http://kenwheeler.github.io/slick/img/slick.gif" />
|
|
||||||
<meta property="og:image:type" content="image/gif" />
|
|
||||||
<meta property="og:image:width" content="300" />
|
|
||||||
<meta property="og:image:height" content="300" />
|
|
||||||
<!-- Twitter Card -->
|
|
||||||
<meta name="twitter:card" content="summary" />
|
|
||||||
<meta name="twitter:title" content="slick - the last carousel you'll ever need" />
|
|
||||||
<meta name="twitter:description" content="slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!" />
|
|
||||||
<meta name="twitter:creator" content="@ken_wheeler" />
|
|
||||||
<meta name="twitter:image:src" content="http://kenwheeler.github.io/slick/img/slick.gif" />
|
|
||||||
<meta name="twitter:domain" content="http://kenwheeler.github.io/slick/" />
|
|
||||||
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>
|
|
||||||
<script>
|
|
||||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
||||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
||||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
||||||
|
|
||||||
ga('create', 'UA-4390117-9', 'kenwheeler.github.io');
|
|
||||||
ga('send', 'pageview');
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="header">
|
|
||||||
<div class="header-content">
|
|
||||||
<h1 class="title">slick</h1>
|
|
||||||
<p class="subheading">the last carousel you'll ever need</p>
|
|
||||||
<ul class="nav">
|
|
||||||
<li><a href="#demos">demos</a></li>
|
|
||||||
<li><a href="#getting-started">usage</a></li>
|
|
||||||
<li><a href="#settings">settings</a></li>
|
|
||||||
<li><a href="#go-get-it">get it now</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fixed-header">
|
|
||||||
<div class="header-content">
|
|
||||||
<h1 class="title">slick</h1>
|
|
||||||
<p class="subheading">the last carousel you'll ever need</p>
|
|
||||||
<ul class="nav">
|
|
||||||
<li><a href="#demos">demos</a></li>
|
|
||||||
<li><a href="#getting-started">usage</a></li>
|
|
||||||
<li><a href="#settings">settings</a></li>
|
|
||||||
<li><a href="#go-get-it">get it now</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section id="features" class="blue">
|
|
||||||
<div class="content">
|
|
||||||
<h2>Features</h2>
|
|
||||||
<ul class="features">
|
|
||||||
<li>Fully responsive. Scales with its container.</li>
|
|
||||||
<li>Separate settings per breakpoint</li>
|
|
||||||
<li>Uses CSS3 when available. Fully functional when not.</li>
|
|
||||||
<li>Swipe enabled. Or disabled, if you prefer.</li>
|
|
||||||
<li>Desktop mouse dragging</li>
|
|
||||||
<li>Infinite looping.</li>
|
|
||||||
<li>Fully accessible with arrow key navigation</li>
|
|
||||||
<li>Add, remove, filter & unfilter slides</li>
|
|
||||||
<li>Autoplay, dots, arrows, callbacks, etc...</li>
|
|
||||||
</ul>
|
|
||||||
<hr id="demos"/>
|
|
||||||
<h2>Single Item</h2>
|
|
||||||
<div class="slider single-item">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
<div><h3>6</h3></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.single-item').slick();
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Multiple Items</h2>
|
|
||||||
<div class="slider multiple-items">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
<div><h3>6</h3></div>
|
|
||||||
<div><h3>7</h3></div>
|
|
||||||
<div><h3>8</h3></div>
|
|
||||||
<div><h3>9</h3></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.multiple-items').slick({
|
|
||||||
infinite: true,
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 3
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Responsive Display</h2>
|
|
||||||
<div class="slider responsive">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
<div><h3>6</h3></div>
|
|
||||||
<div><h3>7</h3></div>
|
|
||||||
<div><h3>8</h3></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.responsive').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: false,
|
|
||||||
speed: 300,
|
|
||||||
slidesToShow: 4,
|
|
||||||
slidesToScroll: 4,
|
|
||||||
responsive: [
|
|
||||||
{
|
|
||||||
breakpoint: 1024,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 3,
|
|
||||||
infinite: true,
|
|
||||||
dots: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: 600,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 2,
|
|
||||||
slidesToScroll: 2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: 480,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 1,
|
|
||||||
slidesToScroll: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Adaptive Height</h2>
|
|
||||||
<div class="slider one-time">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3><p>Look ma!</p></div>
|
|
||||||
<div><h3>3</h3><p>Check<br/>this out!</p></div>
|
|
||||||
<div><h3>4</h3><p>Woo!</p></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.one-time').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 300,
|
|
||||||
slidesToShow: 1,
|
|
||||||
adaptiveHeight: true
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Uneven Sets</h2>
|
|
||||||
<div class="slider uneven">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
<div><h3>6</h3></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.uneven').slick({
|
|
||||||
slidesToShow: 4,
|
|
||||||
slidesToScroll: 4
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Center Mode</h2>
|
|
||||||
<div class="slider center">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
<div><h3>6</h3></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.center').slick({
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '60px',
|
|
||||||
slidesToShow: 3,
|
|
||||||
responsive: [
|
|
||||||
{
|
|
||||||
breakpoint: 768,
|
|
||||||
settings: {
|
|
||||||
arrows: false,
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '40px',
|
|
||||||
slidesToShow: 3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: 480,
|
|
||||||
settings: {
|
|
||||||
arrows: false,
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '40px',
|
|
||||||
slidesToShow: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Lazy Loading</h2>
|
|
||||||
<div class="slider lazy">
|
|
||||||
<div><div class="image"><img data-lazy="img/lazyfonz1.png"/></div></div>
|
|
||||||
<div><div class="image"><img data-lazy="img/lazyfonz2.png"/></div></div>
|
|
||||||
<div><div class="image"><img data-lazy="img/lazyfonz3.png"/></div></div>
|
|
||||||
<div><div class="image"><img data-lazy="img/lazyfonz4.png"/></div></div>
|
|
||||||
<div><div class="image"><img data-lazy="img/lazyfonz5.png"/></div></div>
|
|
||||||
<div><div class="image"><img data-lazy="img/lazyfonz6.png"/></div></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
// To use lazy loading, set a data-lazy attribute
|
|
||||||
// on your img tags and leave off the src
|
|
||||||
|
|
||||||
<img data-lazy="img/lazyfonz1.png"/>
|
|
||||||
|
|
||||||
$('.lazy').slick({
|
|
||||||
lazyLoad: 'ondemand',
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 1
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Autoplay</h2>
|
|
||||||
<div class="slider autoplay">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
<div><h3>6</h3></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.autoplay').slick({
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
autoplay: true,
|
|
||||||
autoplaySpeed: 2000,
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Fade</h2>
|
|
||||||
<div class="slider fade">
|
|
||||||
<div><div class="image"><img src="img/fonz1.png"/></div></div>
|
|
||||||
<div><div class="image"><img src="img/fonz2.png"/></div></div>
|
|
||||||
<div><div class="image"><img src="img/fonz3.png"/></div></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.fade').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 500,
|
|
||||||
fade: true,
|
|
||||||
slide: '> div',
|
|
||||||
cssEase: 'linear'
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Add & Remove</h2>
|
|
||||||
<div class="slider add-remove">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
</div>
|
|
||||||
<div class="buttons">
|
|
||||||
<a href="javascript:void(0)" class="button js-add-slide">Add Slide</a>
|
|
||||||
<a href="javascript:void(0)" class="button js-remove-slide">Remove Slide</a>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.add-remove').slick({
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 3
|
|
||||||
});
|
|
||||||
var slideIndex = 1;
|
|
||||||
$('.js-add-slide').on('click', function(){
|
|
||||||
slideIndex++;
|
|
||||||
$('.add-remove').slickAdd('<div><h3>'+slideIndex+'</h3></div>');
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.js-remove-slide').on('click', function(){
|
|
||||||
$('.add-remove').slickRemove(slideIndex - 1);
|
|
||||||
if (slideIndex !== 0) {
|
|
||||||
slideIndex--;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Filtering</h2>
|
|
||||||
<div class="slider filtering">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
<div><h3>6</h3></div>
|
|
||||||
<div><h3>7</h3></div>
|
|
||||||
<div><h3>8</h3></div>
|
|
||||||
<div><h3>9</h3></div>
|
|
||||||
<div><h3>10</h3></div>
|
|
||||||
<div><h3>11</h3></div>
|
|
||||||
<div><h3>12</h3></div>
|
|
||||||
</div>
|
|
||||||
<div class="filter">
|
|
||||||
<a href="javascript:void(0)" class="button js-filter">Filter Slides</a>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.filtering').slick({
|
|
||||||
slidesToShow: 4,
|
|
||||||
slidesToScroll: 4
|
|
||||||
});
|
|
||||||
|
|
||||||
var filtered = false;
|
|
||||||
|
|
||||||
$('.js-filter').on('click', function(){
|
|
||||||
if(filtered === false) {
|
|
||||||
$('.filtering').slickFilter(':even');
|
|
||||||
$(this).text('Unfilter Slides');
|
|
||||||
filtered = true;
|
|
||||||
} else {
|
|
||||||
$('.filtering').slickUnfilter();
|
|
||||||
$(this).text('Filter Slides');
|
|
||||||
filtered = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Destroy</h2>
|
|
||||||
<p class="destroy">If you really want to be that guy...</p>
|
|
||||||
<pre><code>
|
|
||||||
$('.your-slider').unslick();
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<h2>Slider Syncing</h2>
|
|
||||||
<div class="slider slider-for">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
</div>
|
|
||||||
<div class="slider slider-nav">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.slider-for').slick({
|
|
||||||
slidesToShow: 1,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
arrows: false,
|
|
||||||
fade: true,
|
|
||||||
asNavFor: '.slider-nav'
|
|
||||||
});
|
|
||||||
$('.slider-nav').slick({
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
asNavFor: '.slider-for',
|
|
||||||
dots: true,
|
|
||||||
centerMode: true,
|
|
||||||
focusOnSelect: true
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr />
|
|
||||||
<h2>Right to Left</h2>
|
|
||||||
<div dir="rtl" class="slider single-item-rtl">
|
|
||||||
<div><h3>1</h3></div>
|
|
||||||
<div><h3>2</h3></div>
|
|
||||||
<div><h3>3</h3></div>
|
|
||||||
<div><h3>4</h3></div>
|
|
||||||
<div><h3>5</h3></div>
|
|
||||||
<div><h3>6</h3></div>
|
|
||||||
</div>
|
|
||||||
<pre><code>
|
|
||||||
$('.single-item-rtl').slick({
|
|
||||||
rtl: true
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<p><strong>Note:</strong> the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".</p>
|
|
||||||
<hr />
|
|
||||||
<h4 class="more">and a whole lot more...</h4>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="getting-started" class="white">
|
|
||||||
<div class="content">
|
|
||||||
<h2 class="margin-40">Getting Started</h2>
|
|
||||||
<p>Set up your HTML markup.</p>
|
|
||||||
<pre><code>
|
|
||||||
<div class="your-class">
|
|
||||||
<div>your content</div>
|
|
||||||
<div>your content</div>
|
|
||||||
<div>your content</div>
|
|
||||||
</div>
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<p>Move the /slick folder into your project</p>
|
|
||||||
<hr/>
|
|
||||||
<p>Add slick.css in your <head></p>
|
|
||||||
<pre><code>
|
|
||||||
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<p>Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)</p>
|
|
||||||
<pre><code>
|
|
||||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
||||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
|
||||||
<script type="text/javascript" src="slick/slick.min.js"></script>
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<p>Initialize your slider in your script file or an inline script tag</p>
|
|
||||||
<pre><code>
|
|
||||||
$(document).ready(function(){
|
|
||||||
$('.your-class').slick({
|
|
||||||
setting-name: setting-value
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<p>When complete, your HTML should look something like:</p>
|
|
||||||
<pre><code>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>My Now Amazing Webpage</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="your-class">
|
|
||||||
<div>your content</div>
|
|
||||||
<div>your content</div>
|
|
||||||
<div>your content</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
||||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
|
||||||
<script type="text/javascript" src="slick/slick.min.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
$(document).ready(function(){
|
|
||||||
$('.your-class').slick({
|
|
||||||
setting-name: setting-value
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
</code></pre>
|
|
||||||
<p class="note">NOTE: I highly recommend putting your initialization script in an external JS file.</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="settings" class="blue">
|
|
||||||
<div class="content">
|
|
||||||
<h2 >Settings</h2>
|
|
||||||
<table class="settings">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="first">Setting</th>
|
|
||||||
<th class="type">Type</th>
|
|
||||||
<th class="default">Default</th>
|
|
||||||
<th class="last">Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>accessibility</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>Enables tabbing and arrow key navigation</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>adaptiveHeight</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Enables adaptive height for single slide horizontal carousels.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>autoplay</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Enables Autoplay</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>autoplaySpeed</td>
|
|
||||||
<td>int(ms)</td>
|
|
||||||
<td>3000</td>
|
|
||||||
<td>Autoplay Speed in milliseconds</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>arrows</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>Prev/Next Arrows</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>asNavFor</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>null</td>
|
|
||||||
<td>Set the slider to be the navigation of other slider (Class or ID Name)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>appendArrows</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>$(element)</td>
|
|
||||||
<td>Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>prevArrow</td>
|
|
||||||
<td>string (html|jQuery selector) | object (DOM node|jQuery object)</td>
|
|
||||||
<td><button type="button" class="slick-prev">Previous</button></td>
|
|
||||||
<td>Allows you to select a node or customize the HTML for the "Previous" arrow.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>nextArrow</td>
|
|
||||||
<td>string (html|jQuery selector) | object (DOM node|jQuery object)</td>
|
|
||||||
<td><button type="button" class="slick-next">Next</button></td>
|
|
||||||
<td>Allows you to select a node or customize the HTML for the "Next" arrow.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>centerMode</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>centerPadding</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>'50px'</td>
|
|
||||||
<td>Side padding when in center mode (px or %)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>cssEase</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>'ease'</td>
|
|
||||||
<td>CSS3 Animation Easing</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>customPaging</td>
|
|
||||||
<td>function</td>
|
|
||||||
<td>n/a</td>
|
|
||||||
<td>Custom paging templates. See source for use example.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>dots</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Show dot indicators</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>draggable</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>Enable mouse dragging</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>fade</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Enable fade</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>focusOnSelect</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Enable focus on selected element (click)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>easing</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>'linear'</td>
|
|
||||||
<td>Add easing for jQuery animate. Use with easing libraries or default easing methods</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>infinite</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>Infinite loop sliding</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>lazyLoad</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>'ondemand'</td>
|
|
||||||
<td>Set lazy loading technique. Accepts 'ondemand' or 'progressive'.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>onBeforeChange</td>
|
|
||||||
<td>function</td>
|
|
||||||
<td>null</td>
|
|
||||||
<td>Before slide callback</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>onAfterChange</td>
|
|
||||||
<td>function</td>
|
|
||||||
<td>null</td>
|
|
||||||
<td>After slide callback</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>onInit</td>
|
|
||||||
<td>function</td>
|
|
||||||
<td>null</td>
|
|
||||||
<td>Callback that fires after first initialization</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>onReInit</td>
|
|
||||||
<td>function</td>
|
|
||||||
<td>null</td>
|
|
||||||
<td>Callback that fires after every re-initialization</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>pauseOnHover</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>Pause Autoplay On Hover</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>pauseOnDotsHover</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Pause Autoplay when a dot is hovered</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>responsive</td>
|
|
||||||
<td>object</td>
|
|
||||||
<td>none</td>
|
|
||||||
<td>Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slide</td>
|
|
||||||
<td>element</td>
|
|
||||||
<td>'div'</td>
|
|
||||||
<td>Element query to use as slide</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slidesToShow</td>
|
|
||||||
<td>int</td>
|
|
||||||
<td>1</td>
|
|
||||||
<td># of slides to show</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slidesToScroll</td>
|
|
||||||
<td>int</td>
|
|
||||||
<td>1</td>
|
|
||||||
<td># of slides to scroll</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>speed</td>
|
|
||||||
<td>int(ms)</td>
|
|
||||||
<td>300</td>
|
|
||||||
<td>Slide/Fade animation speed</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>swipe</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>Enable swiping</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>touchMove</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>Enable slide motion with touch</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>touchThreshold</td>
|
|
||||||
<td>int</td>
|
|
||||||
<td>5</td>
|
|
||||||
<td>To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>useCSS</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>Enable/Disable CSS Transitions</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>vertical</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Vertical slide mode</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>rtl</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Change the slider's direction to become right-to-left</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<h2>Methods</h2>
|
|
||||||
<table class="methods">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="first">Method</th>
|
|
||||||
<th>Arguments</th>
|
|
||||||
<th class="last">Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>slickCurrentSlide</td>
|
|
||||||
<td>none</td>
|
|
||||||
<td>Returns the current slide index</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickGoTo</td>
|
|
||||||
<td>int : slide number</td>
|
|
||||||
<td>Navigates to a slide by index</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickNext</td>
|
|
||||||
<td>none</td>
|
|
||||||
<td>Navigates to the next slide</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickPrev</td>
|
|
||||||
<td>none</td>
|
|
||||||
<td>Navigates to the previous slide</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickPause</td>
|
|
||||||
<td>none</td>
|
|
||||||
<td>Pauses autoplay</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickPlay</td>
|
|
||||||
<td>none</td>
|
|
||||||
<td>Starts autoplay</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickAdd</td>
|
|
||||||
<td>html or DOM object, index, addBefore</td>
|
|
||||||
<td>Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickRemove</td>
|
|
||||||
<td>index, removeBefore</td>
|
|
||||||
<td>Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickFilter</td>
|
|
||||||
<td>Selector or Function</td>
|
|
||||||
<td>Filters slides using jQuery .filter()</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickUnfilter</td>
|
|
||||||
<td>index</td>
|
|
||||||
<td>Removes applied filtering</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickGetOption</td>
|
|
||||||
<td>option : string</td>
|
|
||||||
<td>Gets an individual option value.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>slickSetOption</td>
|
|
||||||
<td>option : string, value : depends on option, refresh : boolean</td>
|
|
||||||
<td>Sets an individual value live. Set refresh to true if it's a UI update.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>unslick</td>
|
|
||||||
<td>none</td>
|
|
||||||
<td>Deconstructs slick</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>getSlick</td>
|
|
||||||
<td>none</td>
|
|
||||||
<td>Get Slick Object</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="go-get-it" class="white">
|
|
||||||
<div class="content">
|
|
||||||
<h2>Go Get It</h2>
|
|
||||||
<a class="button first" href="https://github.com/kenwheeler/slick/archive/master.zip">Download Now</a>
|
|
||||||
<a class="button last" href="https://github.com/kenwheeler/slick/">View On Github</a>
|
|
||||||
<hr/>
|
|
||||||
<p class="cdn">You can also use slick with the jsDelivr CDN!</p>
|
|
||||||
<pre><code>
|
|
||||||
CSS
|
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
|
|
||||||
|
|
||||||
JS
|
|
||||||
|
|
||||||
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
|
|
||||||
</code></pre>
|
|
||||||
<hr/>
|
|
||||||
<p class="guff">If you like slick, and also like Sass, try my <a href="http://kenwheeler.github.io/guff">Guff</a> mixin library!</p>
|
|
||||||
<hr/>
|
|
||||||
<div id="disqus_thread"></div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
||||||
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
|
|
||||||
<script type="text/javascript" src="slick/slick.js"></script>
|
|
||||||
<script type="text/javascript" src="js/scripts.js"></script>
|
|
||||||
|
|
||||||
<script>hljs.initHighlightingOnLoad();</script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var disqus_shortname = 'slickcarousel';
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
|
||||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
|
||||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,191 +0,0 @@
|
|||||||
$(document).ready(function() {
|
|
||||||
$('.single-item').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 300,
|
|
||||||
slidesToShow: 1,
|
|
||||||
slidesToScroll: 1
|
|
||||||
});
|
|
||||||
$('.multiple-items').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 300,
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 3
|
|
||||||
});
|
|
||||||
$('.one-time').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 300,
|
|
||||||
slidesToShow: 1,
|
|
||||||
adaptiveHeight: true
|
|
||||||
});
|
|
||||||
$('.uneven').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 300,
|
|
||||||
slidesToShow: 4,
|
|
||||||
slidesToScroll: 4
|
|
||||||
});
|
|
||||||
$('.responsive').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: false,
|
|
||||||
speed: 300,
|
|
||||||
slidesToShow: 4,
|
|
||||||
slidesToScroll: 4,
|
|
||||||
responsive: [{
|
|
||||||
breakpoint: 1024,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 3,
|
|
||||||
infinite: true,
|
|
||||||
dots: true
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
breakpoint: 600,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 2,
|
|
||||||
slidesToScroll: 2
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
breakpoint: 480,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 1,
|
|
||||||
slidesToScroll: 1
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.center').slick({
|
|
||||||
centerMode: true,
|
|
||||||
infinite: true,
|
|
||||||
centerPadding: '60px',
|
|
||||||
slidesToShow: 3,
|
|
||||||
responsive: [{
|
|
||||||
breakpoint: 768,
|
|
||||||
settings: {
|
|
||||||
arrows: false,
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '40px',
|
|
||||||
slidesToShow: 3
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
breakpoint: 480,
|
|
||||||
settings: {
|
|
||||||
arrows: false,
|
|
||||||
centerMode: true,
|
|
||||||
centerPadding: '40px',
|
|
||||||
slidesToShow: 1
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
$('.lazy').slick({
|
|
||||||
lazyLoad: 'ondemand',
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 1
|
|
||||||
});
|
|
||||||
$('.autoplay').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 300,
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
autoplay: true,
|
|
||||||
autoplaySpeed: 2000
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.fade').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 500,
|
|
||||||
fade: true,
|
|
||||||
slide: 'div',
|
|
||||||
cssEase: 'linear'
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.add-remove').slick({
|
|
||||||
dots: true,
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 3
|
|
||||||
});
|
|
||||||
var slideIndex = 1;
|
|
||||||
$('.js-add-slide').on('click', function() {
|
|
||||||
slideIndex++;
|
|
||||||
$('.add-remove').slickAdd('<div><h3>' + slideIndex + '</h3></div>');
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.js-remove-slide').on('click', function() {
|
|
||||||
$('.add-remove').slickRemove(slideIndex - 1);
|
|
||||||
if (slideIndex !== 0){
|
|
||||||
slideIndex--;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.filtering').slick({
|
|
||||||
dots: true,
|
|
||||||
slidesToShow: 4,
|
|
||||||
slidesToScroll: 4
|
|
||||||
});
|
|
||||||
var filtered = false;
|
|
||||||
$('.js-filter').on('click', function() {
|
|
||||||
if (filtered === false) {
|
|
||||||
$('.filtering').slickFilter(':even');
|
|
||||||
$(this).text('Unfilter Slides');
|
|
||||||
filtered = true;
|
|
||||||
} else {
|
|
||||||
$('.filtering').slickUnfilter();
|
|
||||||
$(this).text('Filter Slides');
|
|
||||||
filtered = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.slider-for').slick({
|
|
||||||
slidesToShow: 1,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
arrows: false,
|
|
||||||
fade: true,
|
|
||||||
asNavFor: '.slider-nav'
|
|
||||||
});
|
|
||||||
$('.slider-nav').slick({
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
asNavFor: '.slider-for',
|
|
||||||
dots: true,
|
|
||||||
centerMode: true,
|
|
||||||
focusOnSelect: true
|
|
||||||
});
|
|
||||||
|
|
||||||
$(window).on('scroll', function() {
|
|
||||||
if ($(window).scrollTop() > 166) {
|
|
||||||
$('.fixed-header').show();
|
|
||||||
} else {
|
|
||||||
$('.fixed-header').hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('ul.nav a').on('click', function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
var targetID = $(this).attr('href');
|
|
||||||
var targetST = $(targetID).offset().top - 48;
|
|
||||||
$('body, html').animate({
|
|
||||||
scrollTop: targetST + 'px'
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.single-item-rtl').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
speed: 300,
|
|
||||||
slidesToShow: 1,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
rtl: true
|
|
||||||
});
|
|
||||||
$('.multiple-items-rtl').slick({
|
|
||||||
dots: true,
|
|
||||||
infinite: true,
|
|
||||||
slidesToShow: 3,
|
|
||||||
slidesToScroll: 3,
|
|
||||||
rtl: true
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "slick-carousel",
|
|
||||||
"version": "1.3.9",
|
|
||||||
"description": "the last carousel you'll ever need",
|
|
||||||
"main": "slick/slick.js",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/kenwheeler/slick.git"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"carousel",
|
|
||||||
"slick",
|
|
||||||
"responsive"
|
|
||||||
],
|
|
||||||
"author": "Ken Wheeler",
|
|
||||||
"license": "MIT",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/kenwheeler/slick/issues"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "slick",
|
|
||||||
"title": "slick",
|
|
||||||
"description": "A jQuery responsive touch carousel",
|
|
||||||
"keywords": [
|
|
||||||
"responsive",
|
|
||||||
"slider",
|
|
||||||
"carousel",
|
|
||||||
"touch",
|
|
||||||
"mobile"
|
|
||||||
],
|
|
||||||
"version": "1.3.9",
|
|
||||||
"author": {
|
|
||||||
"name": "Ken Wheeler",
|
|
||||||
"url": "http://kenwheeler.github.io"
|
|
||||||
},
|
|
||||||
"maintainers": [{
|
|
||||||
"name": "Ken Wheeler",
|
|
||||||
"email": "dubmediagroup@gmail.com",
|
|
||||||
"url": "http://www.dubmediagroup.com"
|
|
||||||
}],
|
|
||||||
"licenses": [{
|
|
||||||
"type": "MIT",
|
|
||||||
"url": "https://github.com/kenwheeler/slick/blob/master/LICENSE"
|
|
||||||
}],
|
|
||||||
"demo": "http://kenwheeler.github.io/slick/",
|
|
||||||
"bugs": "https://github.com/kenwheeler/slick/issues",
|
|
||||||
"homepage": "https://github.com/kenwheeler/slick/",
|
|
||||||
"docs": "https://github.com/kenwheeler/slick/",
|
|
||||||
"download": "https://github.com/kenwheeler/slick/archive/master.zip",
|
|
||||||
"dependencies": {
|
|
||||||
"jquery": ">=1.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
@ -1,10 +0,0 @@
|
|||||||
css_dir = "."
|
|
||||||
sass_dir = "."
|
|
||||||
images_dir = "."
|
|
||||||
fonts_dir = "fonts"
|
|
||||||
relative_assets = true
|
|
||||||
|
|
||||||
output_style = :compact
|
|
||||||
line_comments = false
|
|
||||||
|
|
||||||
preferred_syntax = :scss
|
|
||||||
Binary file not shown.
@ -1,14 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<metadata>Generated by Fontastic.me</metadata>
|
|
||||||
<defs>
|
|
||||||
<font id="slick" horiz-adv-x="512">
|
|
||||||
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
|
|
||||||
<missing-glyph horiz-adv-x="512" />
|
|
||||||
|
|
||||||
<glyph unicode="→" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
|
||||||
<glyph unicode="←" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
|
||||||
<glyph unicode="•" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
|
||||||
<glyph unicode="a" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
|
|
||||||
</font></defs></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
Binary file not shown.
@ -1,55 +0,0 @@
|
|||||||
/* Slider */
|
|
||||||
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
|
|
||||||
|
|
||||||
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
|
|
||||||
.slick-list:focus { outline: none; }
|
|
||||||
.slick-loading .slick-list { background: white url("./ajax-loader.gif") center center no-repeat; }
|
|
||||||
.slick-list.dragging { cursor: pointer; cursor: hand; }
|
|
||||||
|
|
||||||
.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
|
|
||||||
|
|
||||||
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
|
|
||||||
.slick-track:before, .slick-track:after { content: ""; display: table; }
|
|
||||||
.slick-track:after { clear: both; }
|
|
||||||
.slick-loading .slick-track { visibility: hidden; }
|
|
||||||
|
|
||||||
.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
|
|
||||||
.slick-slide img { display: block; }
|
|
||||||
.slick-slide.slick-loading img { display: none; }
|
|
||||||
.slick-slide.dragging img { pointer-events: none; }
|
|
||||||
.slick-initialized .slick-slide { display: block; }
|
|
||||||
.slick-loading .slick-slide { visibility: hidden; }
|
|
||||||
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
|
|
||||||
|
|
||||||
/* Icons */
|
|
||||||
@font-face { font-family: "slick"; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }
|
|
||||||
/* Arrows */
|
|
||||||
.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
|
|
||||||
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
|
|
||||||
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
|
|
||||||
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }
|
|
||||||
|
|
||||||
.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
|
||||||
|
|
||||||
.slick-prev { left: -25px; }
|
|
||||||
.slick-prev:before { content: "\2190"; }
|
|
||||||
|
|
||||||
.slick-next { right: -25px; }
|
|
||||||
.slick-next:before { content: "\2192"; }
|
|
||||||
|
|
||||||
/* Dots */
|
|
||||||
.slick-slider { margin-bottom: 30px; }
|
|
||||||
|
|
||||||
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; }
|
|
||||||
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
|
|
||||||
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
|
|
||||||
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
|
|
||||||
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
|
|
||||||
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\2022"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
|
||||||
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }
|
|
||||||
|
|
||||||
[dir="rtl"] .slick-next {right: auto;left: -25px;}
|
|
||||||
[dir="rtl"] .slick-next:before {content: "\2190";}
|
|
||||||
[dir="rtl"] .slick-prev {right: -25px;left: auto;}
|
|
||||||
[dir="rtl"] .slick-prev:before {content: "\2192";}
|
|
||||||
[dir="rtl"] .slick-slide {float: right;}
|
|
||||||
File diff suppressed because it is too large
Load Diff
1
scripts/slick-1.3.9/slick/slick.min.js
vendored
1
scripts/slick-1.3.9/slick/slick.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,287 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
// Default Variables
|
|
||||||
|
|
||||||
$slick-font-path: "./fonts/" !default;
|
|
||||||
$slick-font-family: "slick" !default;
|
|
||||||
$slick-loader-path: "./" !default;
|
|
||||||
$slick-arrow-color: white !default;
|
|
||||||
$slick-dot-color: black !default;
|
|
||||||
$slick-dot-color-active: $slick-dot-color !default;
|
|
||||||
$slick-prev-character: '\2190' !default;
|
|
||||||
$slick-next-character: '\2192' !default;
|
|
||||||
$slick-dot-character: '\2022' !default;
|
|
||||||
$slick-dot-size: 6px !default;
|
|
||||||
$opacity-default: .75;
|
|
||||||
$opacity-on-hover: 1;
|
|
||||||
$opacity-not-active: .25;
|
|
||||||
|
|
||||||
|
|
||||||
@function slick-image-url($url) {
|
|
||||||
@if function-exists(image-url) {
|
|
||||||
@return image-url($url, false, false);
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@return url($slick-loader-path + $url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@function slick-font-url($url) {
|
|
||||||
@if function-exists(font-url) {
|
|
||||||
@return font-url($url);
|
|
||||||
}
|
|
||||||
@else {
|
|
||||||
@return url($slick-font-path + $url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Slider */
|
|
||||||
|
|
||||||
.slick-slider {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
-ms-touch-action: pan-y;
|
|
||||||
touch-action: pan-y;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
.slick-list {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slick-loading & {
|
|
||||||
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dragging {
|
|
||||||
cursor: pointer;
|
|
||||||
cursor: hand;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.slick-slider .slick-list,
|
|
||||||
.slick-track,
|
|
||||||
.slick-slide,
|
|
||||||
.slick-slide img {
|
|
||||||
-webkit-transform: translate3d(0, 0, 0);
|
|
||||||
-moz-transform: translate3d(0, 0, 0);
|
|
||||||
-ms-transform: translate3d(0, 0, 0);
|
|
||||||
-o-transform: translate3d(0, 0, 0);
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
.slick-track {
|
|
||||||
position: relative;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
display: block;
|
|
||||||
zoom: 1;
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slick-loading & {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.slick-slide {
|
|
||||||
float: left;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 1px;
|
|
||||||
[dir="rtl"] & {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
&.slick-loading img {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&.dragging img {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slick-initialized & {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slick-loading & {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slick-vertical & {
|
|
||||||
display: block;
|
|
||||||
height: auto;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icons */
|
|
||||||
@if $slick-font-family == "slick" {
|
|
||||||
@font-face {
|
|
||||||
font-family:"slick";
|
|
||||||
src: slick-font-url("slick.eot");
|
|
||||||
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"),
|
|
||||||
slick-font-url("slick.woff") format("woff"),
|
|
||||||
slick-font-url("slick.ttf") format("truetype"),
|
|
||||||
slick-font-url("slick.svg#slick") format("svg");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrows */
|
|
||||||
|
|
||||||
.slick-prev,
|
|
||||||
.slick-next {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
line-height: 0;
|
|
||||||
font-size: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
background: transparent;
|
|
||||||
color: transparent;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -10px;
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
&:hover, &:focus {
|
|
||||||
outline: none;
|
|
||||||
background: transparent;
|
|
||||||
color: transparent;
|
|
||||||
&:before {
|
|
||||||
opacity: $opacity-on-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.slick-disabled:before {
|
|
||||||
opacity: $opacity-not-active;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.slick-prev:before, .slick-next:before {
|
|
||||||
font-family: $slick-font-family;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1;
|
|
||||||
color: $slick-arrow-color;
|
|
||||||
opacity: $opacity-default;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
.slick-prev {
|
|
||||||
left: -25px;
|
|
||||||
[dir="rtl"] & {
|
|
||||||
left: auto;
|
|
||||||
right: -25px;
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
content: $slick-prev-character;
|
|
||||||
[dir="rtl"] & {
|
|
||||||
content: $slick-next-character;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.slick-next {
|
|
||||||
right: -25px;
|
|
||||||
[dir="rtl"] & {
|
|
||||||
left: -25px;
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
content: $slick-next-character;
|
|
||||||
[dir="rtl"] & {
|
|
||||||
content: $slick-prev-character;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dots */
|
|
||||||
|
|
||||||
.slick-slider {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.slick-dots {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -45px;
|
|
||||||
list-style: none;
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
margin: 0 5px;
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
button {
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
display: block;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
outline: none;
|
|
||||||
line-height: 0;
|
|
||||||
font-size: 0;
|
|
||||||
color: transparent;
|
|
||||||
padding: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover, &:focus {
|
|
||||||
outline: none;
|
|
||||||
&:before {
|
|
||||||
opacity: $opacity-on-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
content: $slick-dot-character;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
font-family: $slick-font-family;
|
|
||||||
font-size: $slick-dot-size;
|
|
||||||
line-height: 20px;
|
|
||||||
text-align: center;
|
|
||||||
color: $slick-dot-color;
|
|
||||||
opacity: $opacity-not-active;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
&.slick-active button:before {
|
|
||||||
color: $slick-dot-color-active;
|
|
||||||
opacity: $opacity-default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1
scripts/smooth-scroll
Submodule
1
scripts/smooth-scroll
Submodule
@ -0,0 +1 @@
|
|||||||
|
Subproject commit 80dd4654b4d683f5bf52e8730dbf1d89be690898
|
||||||
10
scripts/smooth-scroll/.gitignore
vendored
10
scripts/smooth-scroll/.gitignore
vendored
@ -1,10 +0,0 @@
|
|||||||
# Node
|
|
||||||
node_modules
|
|
||||||
test/results
|
|
||||||
test/coverage
|
|
||||||
|
|
||||||
## OS X
|
|
||||||
.DS_Store
|
|
||||||
._*
|
|
||||||
.Spotlight-V100
|
|
||||||
.Trashes
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
language: node_js
|
|
||||||
node_js:
|
|
||||||
- "0.11"
|
|
||||||
- "0.10"
|
|
||||||
before_script:
|
|
||||||
- npm install -g gulp
|
|
||||||
script: gulp
|
|
||||||
@ -1,355 +0,0 @@
|
|||||||
# Smooth Scroll [](https://travis-ci.org/cferdinandi/smooth-scroll)
|
|
||||||
A lightweight script to animate scrolling to anchor links.
|
|
||||||
|
|
||||||
[Download Smooth Scroll](https://github.com/cferdinandi/smooth-scroll/archive/master.zip) / [View the demo](http://cferdinandi.github.io/smooth-scroll/)
|
|
||||||
|
|
||||||
**In This Documentation**
|
|
||||||
|
|
||||||
1. [Getting Started](#getting-started)
|
|
||||||
2. [Installing with Package Managers](#installing-with-package-managers)
|
|
||||||
3. [Options & Settings](#options-and-settings)
|
|
||||||
4. [Browser Compatibility](#browser-compatibility)
|
|
||||||
5. [Contributors](#contributors)
|
|
||||||
6. [How to Contribute](#how-to-contribute)
|
|
||||||
7. [License](#license)
|
|
||||||
8. [Changelog](#changelog)
|
|
||||||
9. [Older Docs](#older-docs)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code. Unit tests are located in the `test` directory.
|
|
||||||
|
|
||||||
### 1. Include Smooth Scroll on your site.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script src="dist/js/bind-polyfill.js"></script>
|
|
||||||
<script src="dist/js/smooth-scroll.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
Smooth Scroll requires `bind-polyfill.js`, a polyfill that extends ECMAScript 5 API support to more browsers.
|
|
||||||
|
|
||||||
### 2. Add the markup to your HTML.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<a data-scroll href="#bazinga">Anchor Link</a>
|
|
||||||
...
|
|
||||||
<span id="bazinga">Bazinga!</span>
|
|
||||||
```
|
|
||||||
|
|
||||||
Turn anchor links into Smooth Scroll links by adding the `[data-scroll]` data attribute. Give the anchor location an ID just like you normally would.
|
|
||||||
|
|
||||||
### 3. Initialize Smooth Scroll.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script>
|
|
||||||
smoothScroll.init();
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
In the footer of your page, after the content, initialize Smooth Scroll. And that's it, you're done. Nice work!
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Installing with Package Managers
|
|
||||||
|
|
||||||
You can install Smooth Scroll with your favorite package manager.
|
|
||||||
|
|
||||||
* **[NPM](https://www.npmjs.org/):** `npm install cferdinandi/smooth-scroll`
|
|
||||||
* **[Bower](http://bower.io/):** `bower install https://github.com/cferdinandi/smooth-scroll.git`
|
|
||||||
* **[Component](http://component.io/):** `component install cferdinandi/smooth-scroll`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Options and Settings
|
|
||||||
|
|
||||||
Smooth Scroll includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
|
|
||||||
|
|
||||||
### Global Settings
|
|
||||||
|
|
||||||
You can pass options and callbacks into Smooth Scroll through the `init()` function:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
smoothScroll.init({
|
|
||||||
speed: 500, // Integer. How fast to complete the scroll in milliseconds
|
|
||||||
easing: 'easeInOutCubic', // Easing pattern to use
|
|
||||||
updateURL: true, // Boolean. Whether or not to update the URL with the anchor hash on scroll
|
|
||||||
offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
|
|
||||||
callbackBefore: function ( toggle, anchor ) {}, // Function to run before scrolling
|
|
||||||
callbackAfter: function ( toggle, anchor ) {} // Function to run after scrolling
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Easing Options
|
|
||||||
|
|
||||||
**Linear**
|
|
||||||
*Moves at the same speed from start to finish.*
|
|
||||||
|
|
||||||
* `Linear`
|
|
||||||
|
|
||||||
|
|
||||||
**Ease-In**
|
|
||||||
*Gradually increases in speed.*
|
|
||||||
|
|
||||||
* `easeInQuad`
|
|
||||||
* `easeInCubic`
|
|
||||||
* `easeInQuart`
|
|
||||||
* `easeInQuint`
|
|
||||||
|
|
||||||
|
|
||||||
**Ease-In-Out**
|
|
||||||
*Gradually increases in speed, peaks, and then gradually slows down.*
|
|
||||||
|
|
||||||
* `easeInOutQuad`
|
|
||||||
* `easeInOutCubic`
|
|
||||||
* `easeInOutQuart`
|
|
||||||
* `easeInOutQuint`
|
|
||||||
|
|
||||||
|
|
||||||
**Ease-Out**
|
|
||||||
*Gradually decreases in speed.*
|
|
||||||
|
|
||||||
* `easeOutQuad`
|
|
||||||
* `easeOutCubic`
|
|
||||||
* `easeOutQuart`
|
|
||||||
* `easeOutQuint`
|
|
||||||
|
|
||||||
|
|
||||||
Learn more about the different easing patterns and what they do at [easings.net](http://easings.net/).
|
|
||||||
|
|
||||||
### Override settings with data attributes
|
|
||||||
|
|
||||||
Smooth Scroll also lets you override global settings on a link-by-link basis using the `[data-options]` data attribute:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<a data-scroll
|
|
||||||
data-options='{
|
|
||||||
"speed": 500,
|
|
||||||
"easing": "easeInOutCubic",
|
|
||||||
"offset": 0,
|
|
||||||
"updateURL": false
|
|
||||||
}'
|
|
||||||
>
|
|
||||||
Anchor Link
|
|
||||||
</a>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** You must use [valid JSON](http://jsonlint.com/) in order for the `data-options` feature to work.
|
|
||||||
|
|
||||||
### Use Smooth Scroll events in your own scripts
|
|
||||||
|
|
||||||
You can also call Smooth Scroll's scroll animation events in your own scripts.
|
|
||||||
|
|
||||||
#### animateScroll()
|
|
||||||
Animate scrolling to an anchor.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
smoothScroll.animateScroll(
|
|
||||||
toggle, // Node that toggles the animation. ex. document.querySelector('#toggle')
|
|
||||||
anchor, // ID of the anchor to scroll to. ex. '#bazinga'
|
|
||||||
options // Classes and callbacks. Same options as those passed into the init() function.
|
|
||||||
);
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example 1**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
smoothScroll.animateScroll( null, '#bazinga' );
|
|
||||||
```
|
|
||||||
|
|
||||||
**Example 2**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var toggle = document.querySelector('#toggle');
|
|
||||||
var options = { speed: 1000, easing: 'easeOutCubic' };
|
|
||||||
smoothScroll.animateScroll( toggle, '#bazinga', options );
|
|
||||||
```
|
|
||||||
|
|
||||||
#### destroy()
|
|
||||||
Destroy the current `smoothScroll.init()`.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
smoothScroll.destroy();
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
### Fixed Headers
|
|
||||||
|
|
||||||
Add a `[data-scroll-header]` data attribute to fixed headers. Smooth Scroll will automatically offset scroll distances by the header height. If you have multiple fixed headers, add `[data-scroll-header]` to the last one in the markup.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<nav data-scroll-header>
|
|
||||||
...
|
|
||||||
</nav>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## Browser Compatibility
|
|
||||||
|
|
||||||
Smooth Scroll works in all modern browsers, and IE 9 and above.
|
|
||||||
|
|
||||||
Smooth Scroll is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, anchor links will jump the way they normally would. If you need to smooth scrolling for older browsers, [download the jQuery version of Smooth Scroll on GitHub](https://github.com/cferdinandi/smooth-scroll/tree/archive-v1).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Contributors
|
|
||||||
|
|
||||||
* Easing support contributed by [Willem Liu](https://github.com/willemliu).
|
|
||||||
* Easing functions forked from [Gaëtan Renaudeau](https://gist.github.com/gre/1650294).
|
|
||||||
* URL history support contributed by [Robert Pate](https://github.com/robertpateii).
|
|
||||||
* Fixed header support contributed by [Arndt von Lucadou](https://github.com/a-v-l).
|
|
||||||
* Infinite loop bugs in iOS and Chrome (when zoomed) by [Alex Guzman](https://github.com/alexguzman).
|
|
||||||
* IE10 rounding error fixed by [Luke Siedle](https://github.com/luke-siedle).
|
|
||||||
* Enhanced callback functions by [Constant Meiring](https://github.com/constantm).
|
|
||||||
* Scroll-to-top bug for links at the bottom of the page by [Jonas Havers](https://github.com/JonasHavers).
|
|
||||||
* AMD support and numerous code improvements by [Todd Motto](https://github.com/toddmotto).
|
|
||||||
* Push State bug fix by [Yanick Witschi](https://github.com/Toflar).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## How to Contribute
|
|
||||||
|
|
||||||
In lieu of a formal style guide, take care to maintain the existing coding style. Don't forget to update the version number, the changelog (in the `readme.md` file), and when applicable, the documentation.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## License
|
|
||||||
Smooth Scroll is licensed under the [MIT License](http://gomakethings.com/mit/).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Changelog
|
|
||||||
|
|
||||||
Smooth Scroll uses [semantic versioning](http://semver.org/).
|
|
||||||
|
|
||||||
* v5.1.2 - August 31, 2014
|
|
||||||
* Fixed event listener filter to account for sub elements.
|
|
||||||
* Removed unused `event` argument from `animateScroll`
|
|
||||||
* v5.1.1 - August 21, 2014
|
|
||||||
* Passed in `event` variable to `eventHandler` method, fixing Firefox bug.
|
|
||||||
* v5.1.0 - August 18, 2014
|
|
||||||
* Added `destroy` method.
|
|
||||||
* Converted to event bubbling approach for better performance.
|
|
||||||
* Switched to Ruby Sass.
|
|
||||||
* v5.0.4 - August 15, 2014
|
|
||||||
* Added fix for UMD structure.
|
|
||||||
* v5.0.3 - August 13, 2014
|
|
||||||
* Replaced character escaping method with [`CSS.escape`](https://github.com/mathiasbynens/CSS.escape) for more robust character escaping.
|
|
||||||
* v5.0.2 - August 12, 2014
|
|
||||||
* Added character escaping when first character in anchor ID is a number.
|
|
||||||
* v5.0.1 - August 8, 2014
|
|
||||||
* Added polyfill for `Functions.prototype.bind`.
|
|
||||||
* Removed Sass paths from `gulpfile.js`.
|
|
||||||
* v5.0.0 - July 21, 2014
|
|
||||||
* Updated `data-options` functionality to JSON.
|
|
||||||
* Fixed update URL bug.
|
|
||||||
* Set update URL to `true` by default.
|
|
||||||
* v4.8.2 - June 28, 2014
|
|
||||||
* Fixed `extend()` method.
|
|
||||||
* v4.8.1 - June 27, 2014
|
|
||||||
* Fixed problem with `toggles` containing a URL before the fragment identifier
|
|
||||||
* v4.8.0 - June 21, 2014
|
|
||||||
* Converted to gulp.js workflow.
|
|
||||||
* Added unit testing.
|
|
||||||
* Added minified versions of files.
|
|
||||||
* v4.7.2 - June 19, 2014
|
|
||||||
* Fixed typo that broke scroll.
|
|
||||||
* v4.7.1 - June 19, 2014
|
|
||||||
* Fixed factory/root/UMD definition.
|
|
||||||
* v4.7.0 - June 7, 2014
|
|
||||||
* Added AMD support.
|
|
||||||
* Moved public APIs to `exports` variable.
|
|
||||||
* Improved feature test.
|
|
||||||
* Replaced `Array.prototype.forEach` hack with proper `forEach` function.
|
|
||||||
* Added a more well supported `trim` function.
|
|
||||||
* General code optimizations for better minification and performance.
|
|
||||||
* Updated to JSDoc documentation (sort of).
|
|
||||||
* Updated to three number versioning system.
|
|
||||||
* Added package manager installation info.
|
|
||||||
* v4.6 - March 21, 2014
|
|
||||||
* [Fixed scroll-to-top bug for links at the bottom of the page](https://github.com/cferdinandi/smooth-scroll/issues/49).
|
|
||||||
* v4.5 - March 20, 2014
|
|
||||||
* Added `offset` to `options`
|
|
||||||
* v4.4 - March 15, 2014
|
|
||||||
* [Fixed iOS scroll-to-top bug](https://github.com/cferdinandi/smooth-scroll/issues/45).
|
|
||||||
* v4.3 - March 5, 2014
|
|
||||||
* Added arguments to callback functions for greater versatility. [44](https://github.com/cferdinandi/smooth-scroll/pull/44)
|
|
||||||
* v4.2 - February 27, 2014
|
|
||||||
* Fixed error for null `toggle` argument in `animateScroll` function ([43](https://github.com/cferdinandi/smooth-scroll/issues/43)).
|
|
||||||
* v4.1 - February 27, 2014
|
|
||||||
* Converted `_defaults` to a literal object
|
|
||||||
* v4.0 - February 21, 2014
|
|
||||||
* Better public/private method namespacing.
|
|
||||||
* Require `init()` call to run.
|
|
||||||
* New API exposes additional methods for use in your own scripts.
|
|
||||||
* Better documentation.
|
|
||||||
* v3.3 - February 19, 2014
|
|
||||||
* [Add `offsettTop` to `offsetHeigh`t for `scrollHeader`. Allows for multiple fixed headers, or a fixed header that sits slightly below the top of the page.](https://github.com/cferdinandi/smooth-scroll/pull/36)
|
|
||||||
* v3.2 - February 10, 2014
|
|
||||||
* [Fixes iOS infinite loop](https://github.com/cferdinandi/smooth-scroll/pull/35) and [Chrome browser zoom](https://github.com/cferdinandi/smooth-scroll/issues/31) bugs.
|
|
||||||
* v3.1 - February 4, 2014
|
|
||||||
* Reverted to `Array.protype.foreach` loops.
|
|
||||||
* v3.0 - January 28, 2014
|
|
||||||
* Switched to a data attribute for the toggle selector.
|
|
||||||
* Added namespacing to IIFE.
|
|
||||||
* Updated looping method and event listener.
|
|
||||||
* v2.19 - January 23, 2014
|
|
||||||
* [Fix back button behavior in Chrome.](https://github.com/cferdinandi/smooth-scroll/issues/26#issuecomment-33172325)
|
|
||||||
* v2.18 - January 23, 2014
|
|
||||||
* [Update URL before animation.](https://github.com/cferdinandi/smooth-scroll/pull/27)
|
|
||||||
* [Fix back button behavior in Firefox.](https://github.com/cferdinandi/smooth-scroll/issues/26)
|
|
||||||
* v2.17 - January 17, 2014
|
|
||||||
* [Fixed back button behavior when using `data-url` feature.](https://github.com/cferdinandi/smooth-scroll/pull/18)
|
|
||||||
* v2.16 - January 16, 2014
|
|
||||||
* [Updated variables for more accurate easing math when scrolling to top of page.](https://github.com/cferdinandi/smooth-scroll/pull/25#issuecomment-32566729)
|
|
||||||
* v2.15 - January 16, 2014
|
|
||||||
* [Fixed bug that caused "scroll-to-top" animation to create endless loop.](https://github.com/cferdinandi/smooth-scroll/issues/24)
|
|
||||||
* v2.14 - January 15, 2014
|
|
||||||
* [Fixed bug that caused animation to stop several pixels short.](https://github.com/cferdinandi/smooth-scroll/pull/15#issuecomment-32380770)
|
|
||||||
* v2.12 - January 7, 2014
|
|
||||||
* [Added fixed header support.](https://github.com/cferdinandi/smooth-scroll/pull/20#issuecomment-31773547)
|
|
||||||
* v2.11 - January 4, 2014
|
|
||||||
* [Change `offsetHeight` to `scrollHeight` to fix fixed/absolute positioning issues.](https://github.com/cferdinandi/smooth-scroll/pull/14)
|
|
||||||
* v2.10 - December 31, 2013
|
|
||||||
* [Added URL history support.](https://github.com/cferdinandi/smooth-scroll/pull/17)
|
|
||||||
* v2.9 - December 9, 2013
|
|
||||||
* [Added fixed for infinite loop when scrolling up.](https://github.com/cferdinandi/smooth-scroll/issues/13)
|
|
||||||
* v2.8 - December 3, 2013
|
|
||||||
* [Fixed false distance reading.](https://github.com/cferdinandi/smooth-scroll/issues/11)
|
|
||||||
* Added linear easing as fallback when easing pattern not recognized to prevent script from failing.
|
|
||||||
* v2.7 - November 25, 2013
|
|
||||||
* Converted naming conventions back to mathmatical roots (ex. `easeInCubic`) to remain consistent with development community language.
|
|
||||||
* v2.6 - November 26, 2013
|
|
||||||
* Missing character was causing certain easing functions to break.
|
|
||||||
* v2.5 - November 22, 2013
|
|
||||||
* Changed the default easing to `easeInOutNormal`.
|
|
||||||
* v2.4 - November 21, 2013
|
|
||||||
* Added easing support with contributions from [Willem Liu](https://github.com/willemliu) and code from [Gaëtan Renaudeau](https://gist.github.com/gre/1650294).
|
|
||||||
* v2.3 - August 27, 2013
|
|
||||||
* Added missing semicolons.
|
|
||||||
* Defined `animationStop` variable once, add values later.
|
|
||||||
* Activated strict mode.
|
|
||||||
* Wrapped in IIFE.
|
|
||||||
* v2.2 - August 17, 2013
|
|
||||||
* Now you can set the animation speed with the `data-speed` attribute. (ex. `data-speed="400"`)
|
|
||||||
* v2.1 - August 17, 2013
|
|
||||||
* Improvement animation function interval for smoother animation.
|
|
||||||
* Updated to allow for scrolling up the page.
|
|
||||||
* v2.0 - August 14, 2013
|
|
||||||
* Converted to vanilla JavaScript.
|
|
||||||
* Removed dependency on jQuery.
|
|
||||||
* v1.1 - June 7, 2013
|
|
||||||
* Switched to MIT license.
|
|
||||||
* v1.1 - May 18, 2013
|
|
||||||
* Added jQuery noConflict mode.
|
|
||||||
* Updated tutorial.
|
|
||||||
* v1.0 - January 24, 2013
|
|
||||||
* Initial release.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Older Docs
|
|
||||||
|
|
||||||
* [Version 3](http://cferdinandi.github.io/smooth-scroll/archive/v3/)
|
|
||||||
* [Version 1](https://github.com/cferdinandi/smooth-scroll/tree/archive-v1)
|
|
||||||
35
scripts/smooth-scroll/dist/js/bind-polyfill.js
vendored
35
scripts/smooth-scroll/dist/js/bind-polyfill.js
vendored
@ -1,35 +0,0 @@
|
|||||||
/**
|
|
||||||
* smooth-scroll v5.1.2
|
|
||||||
* Animate scrolling to anchor links, by Chris Ferdinandi.
|
|
||||||
* http://github.com/cferdinandi/smooth-scroll
|
|
||||||
*
|
|
||||||
* Free to use under the MIT License.
|
|
||||||
* http://gomakethings.com/mit/
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Polyfill Function.prototype.bind support for otherwise ECMA Script 5 compliant browsers
|
|
||||||
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Compatibility
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (!Function.prototype.bind) {
|
|
||||||
Function.prototype.bind = function (oThis) {
|
|
||||||
if (typeof this !== "function") {
|
|
||||||
// closest thing possible to the ECMAScript 5
|
|
||||||
// internal IsCallable function
|
|
||||||
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
|
||||||
}
|
|
||||||
|
|
||||||
var aArgs = Array.prototype.slice.call(arguments, 1);
|
|
||||||
var fToBind = this;
|
|
||||||
fNOP = function () {};
|
|
||||||
fBound = function () {
|
|
||||||
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
|
|
||||||
};
|
|
||||||
|
|
||||||
fNOP.prototype = this.prototype;
|
|
||||||
fBound.prototype = new fNOP();
|
|
||||||
|
|
||||||
return fBound;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
/** smooth-scroll v5.1.2, by Chris Ferdinandi | http://github.com/cferdinandi/smooth-scroll | Licensed under MIT: http://gomakethings.com/mit/ */
|
|
||||||
Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var o=Array.prototype.slice.call(arguments,1),n=this;return fNOP=function(){},fBound=function(){return n.apply(this instanceof fNOP&&t?this:t,o.concat(Array.prototype.slice.call(arguments)))},fNOP.prototype=this.prototype,fBound.prototype=new fNOP,fBound});
|
|
||||||
393
scripts/smooth-scroll/dist/js/smooth-scroll.js
vendored
393
scripts/smooth-scroll/dist/js/smooth-scroll.js
vendored
@ -1,393 +0,0 @@
|
|||||||
/**
|
|
||||||
* smooth-scroll v5.1.2
|
|
||||||
* Animate scrolling to anchor links, by Chris Ferdinandi.
|
|
||||||
* http://github.com/cferdinandi/smooth-scroll
|
|
||||||
*
|
|
||||||
* Free to use under the MIT License.
|
|
||||||
* http://gomakethings.com/mit/
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function (root, factory) {
|
|
||||||
if ( typeof define === 'function' && define.amd ) {
|
|
||||||
define('smoothScroll', factory(root));
|
|
||||||
} else if ( typeof exports === 'object' ) {
|
|
||||||
module.exports = factory(root);
|
|
||||||
} else {
|
|
||||||
root.smoothScroll = factory(root);
|
|
||||||
}
|
|
||||||
})(this, function (root) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
//
|
|
||||||
// Variables
|
|
||||||
//
|
|
||||||
|
|
||||||
var smoothScroll = {}; // Object for public APIs
|
|
||||||
var supports = !!document.querySelector && !!root.addEventListener; // Feature test
|
|
||||||
var settings;
|
|
||||||
|
|
||||||
// Default settings
|
|
||||||
var defaults = {
|
|
||||||
speed: 500,
|
|
||||||
easing: 'easeInOutCubic',
|
|
||||||
offset: 0,
|
|
||||||
updateURL: true,
|
|
||||||
callbackBefore: function () {},
|
|
||||||
callbackAfter: function () {}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Methods
|
|
||||||
//
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A simple forEach() implementation for Arrays, Objects and NodeLists
|
|
||||||
* @private
|
|
||||||
* @param {Array|Object|NodeList} collection Collection of items to iterate
|
|
||||||
* @param {Function} callback Callback function for each iteration
|
|
||||||
* @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
|
|
||||||
*/
|
|
||||||
var forEach = function (collection, callback, scope) {
|
|
||||||
if (Object.prototype.toString.call(collection) === '[object Object]') {
|
|
||||||
for (var prop in collection) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(collection, prop)) {
|
|
||||||
callback.call(scope, collection[prop], prop, collection);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (var i = 0, len = collection.length; i < len; i++) {
|
|
||||||
callback.call(scope, collection[i], i, collection);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Merge defaults with user options
|
|
||||||
* @private
|
|
||||||
* @param {Object} defaults Default settings
|
|
||||||
* @param {Object} options User options
|
|
||||||
* @returns {Object} Merged values of defaults and options
|
|
||||||
*/
|
|
||||||
var extend = function ( defaults, options ) {
|
|
||||||
var extended = {};
|
|
||||||
forEach(defaults, function (value, prop) {
|
|
||||||
extended[prop] = defaults[prop];
|
|
||||||
});
|
|
||||||
forEach(options, function (value, prop) {
|
|
||||||
extended[prop] = options[prop];
|
|
||||||
});
|
|
||||||
return extended;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the closest matching element up the DOM tree
|
|
||||||
* @param {Element} elem Starting element
|
|
||||||
* @param {String} selector Selector to match against (class, ID, or data attribute)
|
|
||||||
* @return {Boolean|Element} Returns false if not match found
|
|
||||||
*/
|
|
||||||
var getClosest = function (elem, selector) {
|
|
||||||
var firstChar = selector.charAt(0);
|
|
||||||
for ( ; elem && elem !== document; elem = elem.parentNode ) {
|
|
||||||
if ( firstChar === '.' ) {
|
|
||||||
if ( elem.classList.contains( selector.substr(1) ) ) {
|
|
||||||
return elem;
|
|
||||||
}
|
|
||||||
} else if ( firstChar === '#' ) {
|
|
||||||
if ( elem.id === selector.substr(1) ) {
|
|
||||||
return elem;
|
|
||||||
}
|
|
||||||
} else if ( firstChar === '[' ) {
|
|
||||||
if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
|
|
||||||
return elem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Escape special characters for use with querySelector
|
|
||||||
* @private
|
|
||||||
* @param {String} id The anchor ID to escape
|
|
||||||
* @author Mathias Bynens
|
|
||||||
* @link https://github.com/mathiasbynens/CSS.escape
|
|
||||||
*/
|
|
||||||
var escapeCharacters = function ( id ) {
|
|
||||||
var string = String(id);
|
|
||||||
var length = string.length;
|
|
||||||
var index = -1;
|
|
||||||
var codeUnit;
|
|
||||||
var result = '';
|
|
||||||
var firstCodeUnit = string.charCodeAt(0);
|
|
||||||
while (++index < length) {
|
|
||||||
codeUnit = string.charCodeAt(index);
|
|
||||||
// Note: there’s no need to special-case astral symbols, surrogate
|
|
||||||
// pairs, or lone surrogates.
|
|
||||||
|
|
||||||
// If the character is NULL (U+0000), then throw an
|
|
||||||
// `InvalidCharacterError` exception and terminate these steps.
|
|
||||||
if (codeUnit === 0x0000) {
|
|
||||||
throw new InvalidCharacterError(
|
|
||||||
'Invalid character: the input contains U+0000.'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
|
|
||||||
// U+007F, […]
|
|
||||||
(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
|
|
||||||
// If the character is the first character and is in the range [0-9]
|
|
||||||
// (U+0030 to U+0039), […]
|
|
||||||
(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
|
|
||||||
// If the character is the second character and is in the range [0-9]
|
|
||||||
// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
|
|
||||||
(
|
|
||||||
index === 1 &&
|
|
||||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
|
|
||||||
firstCodeUnit === 0x002D
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point
|
|
||||||
result += '\\' + codeUnit.toString(16) + ' ';
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the character is not handled by one of the above rules and is
|
|
||||||
// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
|
|
||||||
// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
|
|
||||||
// U+005A), or [a-z] (U+0061 to U+007A), […]
|
|
||||||
if (
|
|
||||||
codeUnit >= 0x0080 ||
|
|
||||||
codeUnit === 0x002D ||
|
|
||||||
codeUnit === 0x005F ||
|
|
||||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
|
|
||||||
codeUnit >= 0x0041 && codeUnit <= 0x005A ||
|
|
||||||
codeUnit >= 0x0061 && codeUnit <= 0x007A
|
|
||||||
) {
|
|
||||||
// the character itself
|
|
||||||
result += string.charAt(index);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Otherwise, the escaped character.
|
|
||||||
// http://dev.w3.org/csswg/cssom/#escape-a-character
|
|
||||||
result += '\\' + string.charAt(index);
|
|
||||||
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Calculate the easing pattern
|
|
||||||
* @private
|
|
||||||
* @param {String} type Easing pattern
|
|
||||||
* @param {Number} time Time animation should take to complete
|
|
||||||
* @returns {Number}
|
|
||||||
*/
|
|
||||||
var easingPattern = function ( type, time ) {
|
|
||||||
var pattern;
|
|
||||||
if ( type === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity
|
|
||||||
if ( type === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity
|
|
||||||
if ( type === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
|
|
||||||
if ( type === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity
|
|
||||||
if ( type === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity
|
|
||||||
if ( type === 'easeInOutCubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
|
|
||||||
if ( type === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity
|
|
||||||
if ( type === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity
|
|
||||||
if ( type === 'easeInOutQuart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
|
|
||||||
if ( type === 'easeInQuint' ) pattern = time * time * time * time * time; // accelerating from zero velocity
|
|
||||||
if ( type === 'easeOutQuint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity
|
|
||||||
if ( type === 'easeInOutQuint' ) pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
|
|
||||||
return pattern || time; // no easing, no acceleration
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Calculate how far to scroll
|
|
||||||
* @private
|
|
||||||
* @param {Element} anchor The anchor element to scroll to
|
|
||||||
* @param {Number} headerHeight Height of a fixed header, if any
|
|
||||||
* @param {Number} offset Number of pixels by which to offset scroll
|
|
||||||
* @returns {Number}
|
|
||||||
*/
|
|
||||||
var getEndLocation = function ( anchor, headerHeight, offset ) {
|
|
||||||
var location = 0;
|
|
||||||
if (anchor.offsetParent) {
|
|
||||||
do {
|
|
||||||
location += anchor.offsetTop;
|
|
||||||
anchor = anchor.offsetParent;
|
|
||||||
} while (anchor);
|
|
||||||
}
|
|
||||||
location = location - headerHeight - offset;
|
|
||||||
return location >= 0 ? location : 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Determine the document's height
|
|
||||||
* @private
|
|
||||||
* @returns {Number}
|
|
||||||
*/
|
|
||||||
var getDocumentHeight = function () {
|
|
||||||
return Math.max(
|
|
||||||
document.body.scrollHeight, document.documentElement.scrollHeight,
|
|
||||||
document.body.offsetHeight, document.documentElement.offsetHeight,
|
|
||||||
document.body.clientHeight, document.documentElement.clientHeight
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Convert data-options attribute into an object of key/value pairs
|
|
||||||
* @private
|
|
||||||
* @param {String} options Link-specific options as a data attribute string
|
|
||||||
* @returns {Object}
|
|
||||||
*/
|
|
||||||
var getDataOptions = function ( options ) {
|
|
||||||
return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options );
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update the URL
|
|
||||||
* @private
|
|
||||||
* @param {Element} anchor The element to scroll to
|
|
||||||
* @param {Boolean} url Whether or not to update the URL history
|
|
||||||
*/
|
|
||||||
var updateUrl = function ( anchor, url ) {
|
|
||||||
if ( history.pushState && (url || url === 'true') ) {
|
|
||||||
history.pushState( {
|
|
||||||
pos: anchor.id
|
|
||||||
}, '', window.location.pathname + anchor );
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Start/stop the scrolling animation
|
|
||||||
* @public
|
|
||||||
* @param {Element} toggle The element that toggled the scroll event
|
|
||||||
* @param {Element} anchor The element to scroll to
|
|
||||||
* @param {Object} settings
|
|
||||||
* @param {Event} event
|
|
||||||
*/
|
|
||||||
smoothScroll.animateScroll = function ( toggle, anchor, options ) {
|
|
||||||
|
|
||||||
// Options and overrides
|
|
||||||
var settings = extend( settings || defaults, options || {} ); // Merge user options with defaults
|
|
||||||
var overrides = getDataOptions( toggle ? toggle.getAttribute('data-options') : null );
|
|
||||||
settings = extend( settings, overrides );
|
|
||||||
anchor = '#' + escapeCharacters(anchor.substr(1)); // Escape special characters and leading numbers
|
|
||||||
|
|
||||||
// Selectors and variables
|
|
||||||
var fixedHeader = document.querySelector('[data-scroll-header]'); // Get the fixed header
|
|
||||||
var headerHeight = fixedHeader === null ? 0 : (fixedHeader.offsetHeight + fixedHeader.offsetTop); // Get the height of a fixed header if one exists
|
|
||||||
var startLocation = root.pageYOffset; // Current location on the page
|
|
||||||
var endLocation = getEndLocation( document.querySelector(anchor), headerHeight, parseInt(settings.offset, 10) ); // Scroll to location
|
|
||||||
var animationInterval; // interval timer
|
|
||||||
var distance = endLocation - startLocation; // distance to travel
|
|
||||||
var documentHeight = getDocumentHeight();
|
|
||||||
var timeLapsed = 0;
|
|
||||||
var percentage, position;
|
|
||||||
|
|
||||||
// Update URL
|
|
||||||
updateUrl(anchor, settings.updateURL);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stop the scroll animation when it reaches its target (or the bottom/top of page)
|
|
||||||
* @private
|
|
||||||
* @param {Number} position Current position on the page
|
|
||||||
* @param {Number} endLocation Scroll to location
|
|
||||||
* @param {Number} animationInterval How much to scroll on this loop
|
|
||||||
*/
|
|
||||||
var stopAnimateScroll = function (position, endLocation, animationInterval) {
|
|
||||||
var currentLocation = root.pageYOffset;
|
|
||||||
if ( position == endLocation || currentLocation == endLocation || ( (root.innerHeight + currentLocation) >= documentHeight ) ) {
|
|
||||||
clearInterval(animationInterval);
|
|
||||||
settings.callbackAfter( toggle, anchor ); // Run callbacks after animation complete
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Loop scrolling animation
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
var loopAnimateScroll = function () {
|
|
||||||
timeLapsed += 16;
|
|
||||||
percentage = ( timeLapsed / parseInt(settings.speed, 10) );
|
|
||||||
percentage = ( percentage > 1 ) ? 1 : percentage;
|
|
||||||
position = startLocation + ( distance * easingPattern(settings.easing, percentage) );
|
|
||||||
root.scrollTo( 0, Math.floor(position) );
|
|
||||||
stopAnimateScroll(position, endLocation, animationInterval);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set interval timer
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
var startAnimateScroll = function () {
|
|
||||||
settings.callbackBefore( toggle, anchor ); // Run callbacks before animating scroll
|
|
||||||
animationInterval = setInterval(loopAnimateScroll, 16);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reset position to fix weird iOS bug
|
|
||||||
* @link https://github.com/cferdinandi/smooth-scroll/issues/45
|
|
||||||
*/
|
|
||||||
if ( root.pageYOffset === 0 ) {
|
|
||||||
root.scrollTo( 0, 0 );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start scrolling animation
|
|
||||||
startAnimateScroll();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* If smooth scroll element clicked, animate scroll
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
var eventHandler = function (event) {
|
|
||||||
var toggle = getClosest(event.target, '[data-scroll]');
|
|
||||||
if ( toggle && toggle.tagName.toLowerCase() === 'a' ) {
|
|
||||||
event.preventDefault(); // Prevent default click event
|
|
||||||
smoothScroll.animateScroll( toggle, toggle.hash, settings, event ); // Animate scroll
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Destroy the current initialization.
|
|
||||||
* @public
|
|
||||||
*/
|
|
||||||
smoothScroll.destroy = function () {
|
|
||||||
if ( !settings ) return;
|
|
||||||
document.removeEventListener( 'click', eventHandler, false );
|
|
||||||
settings = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize Smooth Scroll
|
|
||||||
* @public
|
|
||||||
* @param {Object} options User settings
|
|
||||||
*/
|
|
||||||
smoothScroll.init = function ( options ) {
|
|
||||||
|
|
||||||
// feature test
|
|
||||||
if ( !supports ) return;
|
|
||||||
|
|
||||||
// Destroy any existing initializations
|
|
||||||
smoothScroll.destroy();
|
|
||||||
|
|
||||||
// Selectors and variables
|
|
||||||
settings = extend( defaults, options || {} ); // Merge user options with defaults
|
|
||||||
|
|
||||||
// When a toggle is clicked, run the click handler
|
|
||||||
document.addEventListener('click', eventHandler, false);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Public APIs
|
|
||||||
//
|
|
||||||
|
|
||||||
return smoothScroll;
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
/** smooth-scroll v5.1.2, by Chris Ferdinandi | http://github.com/cferdinandi/smooth-scroll | Licensed under MIT: http://gomakethings.com/mit/ */
|
|
||||||
!function(t,e){"function"==typeof define&&define.amd?define("smoothScroll",e(t)):"object"==typeof exports?module.exports=e(t):t.smoothScroll=e(t)}(this,function(t){"use strict";var e,n={},o=!!document.querySelector&&!!t.addEventListener,r={speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callbackBefore:function(){},callbackAfter:function(){}},a=function(t,e,n){if("[object Object]"===Object.prototype.toString.call(t))for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.call(n,t[o],o,t);else for(var r=0,a=t.length;a>r;r++)e.call(n,t[r],r,t)},c=function(t,e){var n={};return a(t,function(e,o){n[o]=t[o]}),a(e,function(t,o){n[o]=e[o]}),n},u=function(t,e){for(var n=e.charAt(0);t&&t!==document;t=t.parentNode)if("."===n){if(t.classList.contains(e.substr(1)))return t}else if("#"===n){if(t.id===e.substr(1))return t}else if("["===n&&t.hasAttribute(e.substr(1,e.length-2)))return t;return!1},i=function(t){for(var e,n=String(t),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r<o;){if(e=n.charCodeAt(r),0===e)throw new InvalidCharacterError("Invalid character: the input contains U+0000.");a+=e>=1&&31>=e||127==e||0===r&&e>=48&&57>=e||1===r&&e>=48&&57>=e&&45===c?"\\"+e.toString(16)+" ":e>=128||45===e||95===e||e>=48&&57>=e||e>=65&&90>=e||e>=97&&122>=e?n.charAt(r):"\\"+n.charAt(r)}return a},s=function(t,e){var n;return"easeInQuad"===t&&(n=e*e),"easeOutQuad"===t&&(n=e*(2-e)),"easeInOutQuad"===t&&(n=.5>e?2*e*e:-1+(4-2*e)*e),"easeInCubic"===t&&(n=e*e*e),"easeOutCubic"===t&&(n=--e*e*e+1),"easeInOutCubic"===t&&(n=.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1),"easeInQuart"===t&&(n=e*e*e*e),"easeOutQuart"===t&&(n=1- --e*e*e*e),"easeInOutQuart"===t&&(n=.5>e?8*e*e*e*e:1-8*--e*e*e*e),"easeInQuint"===t&&(n=e*e*e*e*e),"easeOutQuint"===t&&(n=1+--e*e*e*e*e),"easeInOutQuint"===t&&(n=.5>e?16*e*e*e*e*e:1+16*--e*e*e*e*e),n||e},f=function(t,e,n){var o=0;if(t.offsetParent)do o+=t.offsetTop,t=t.offsetParent;while(t);return o=o-e-n,o>=0?o:0},l=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},d=function(t){return t&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(t):{}},h=function(t,e){history.pushState&&(e||"true"===e)&&history.pushState({pos:t.id},"",window.location.pathname+t)};n.animateScroll=function(e,n,o){var a=c(a||r,o||{}),u=d(e?e.getAttribute("data-options"):null);a=c(a,u),n="#"+i(n.substr(1));var p,m,b,v=document.querySelector("[data-scroll-header]"),g=null===v?0:v.offsetHeight+v.offsetTop,O=t.pageYOffset,y=f(document.querySelector(n),g,parseInt(a.offset,10)),I=y-O,S=l(),A=0;h(n,a.updateURL);var Q=function(o,r,c){var u=t.pageYOffset;(o==r||u==r||t.innerHeight+u>=S)&&(clearInterval(c),a.callbackAfter(e,n))},C=function(){A+=16,m=A/parseInt(a.speed,10),m=m>1?1:m,b=O+I*s(a.easing,m),t.scrollTo(0,Math.floor(b)),Q(b,y,p)},H=function(){a.callbackBefore(e,n),p=setInterval(C,16)};0===t.pageYOffset&&t.scrollTo(0,0),H()};var p=function(t){var o=u(t.target,"[data-scroll]");o&&"a"===o.tagName.toLowerCase()&&(t.preventDefault(),n.animateScroll(o,o.hash,e,t))};return n.destroy=function(){e&&(document.removeEventListener("click",p,!1),e=null)},n.init=function(t){o&&(n.destroy(),e=c(r,t||{}),document.addEventListener("click",p,!1))},n});
|
|
||||||
@ -1,156 +0,0 @@
|
|||||||
// Gulp Packages
|
|
||||||
var gulp = require('gulp');
|
|
||||||
var plumber = require('gulp-plumber');
|
|
||||||
var clean = require('gulp-clean');
|
|
||||||
var rename = require('gulp-rename');
|
|
||||||
var flatten = require('gulp-flatten');
|
|
||||||
var tap = require('gulp-tap');
|
|
||||||
var header = require('gulp-header');
|
|
||||||
var jshint = require('gulp-jshint');
|
|
||||||
var stylish = require('jshint-stylish');
|
|
||||||
var concat = require('gulp-concat');
|
|
||||||
var uglify = require('gulp-uglify');
|
|
||||||
var sass = require('gulp-ruby-sass');
|
|
||||||
var prefix = require('gulp-autoprefixer');
|
|
||||||
var minify = require('gulp-minify-css');
|
|
||||||
var karma = require('gulp-karma');
|
|
||||||
var package = require('./package.json');
|
|
||||||
|
|
||||||
// Paths to project folders
|
|
||||||
var paths = {
|
|
||||||
output : 'dist/',
|
|
||||||
temp: 'src/temp/',
|
|
||||||
scripts : {
|
|
||||||
input : [ 'src/js/*' ],
|
|
||||||
output : 'dist/js/'
|
|
||||||
},
|
|
||||||
styles : {
|
|
||||||
input : 'src/sass/**/*.scss',
|
|
||||||
output : 'dist/css/'
|
|
||||||
},
|
|
||||||
static : 'src/static/**',
|
|
||||||
test : {
|
|
||||||
spec : [ 'test/spec/**/*.js' ],
|
|
||||||
coverage: 'test/coverage/',
|
|
||||||
results: 'test/results/'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Template for banner to add to file headers
|
|
||||||
var banner = {
|
|
||||||
full :
|
|
||||||
'/**\n' +
|
|
||||||
' * <%= package.name %> v<%= package.version %>\n' +
|
|
||||||
' * <%= package.description %>, by <%= package.author.name %>.\n' +
|
|
||||||
' * <%= package.repository.url %>\n' +
|
|
||||||
' * \n' +
|
|
||||||
' * Free to use under the MIT License.\n' +
|
|
||||||
' * http://gomakethings.com/mit/\n' +
|
|
||||||
' */\n\n',
|
|
||||||
min :
|
|
||||||
'/**' +
|
|
||||||
' <%= package.name %> v<%= package.version %>, by Chris Ferdinandi' +
|
|
||||||
' | <%= package.repository.url %>' +
|
|
||||||
' | Licensed under MIT: http://gomakethings.com/mit/' +
|
|
||||||
' */\n'
|
|
||||||
};
|
|
||||||
|
|
||||||
// Concatenate scripts in subfolders
|
|
||||||
gulp.task('concatenate', function() {
|
|
||||||
return gulp.src(paths.scripts.input)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(flatten())
|
|
||||||
|
|
||||||
.pipe(tap(function (file, t) {
|
|
||||||
if ( file.stat.isDirectory() ) {
|
|
||||||
var name = file.relative + '.js';
|
|
||||||
return gulp.src(file.path + '/*.js')
|
|
||||||
.pipe(concat(name))
|
|
||||||
.pipe(gulp.dest(paths.temp));
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Lint and minify scripts
|
|
||||||
gulp.task('scripts', ['clean', 'concatenate'], function() {
|
|
||||||
return gulp.src([
|
|
||||||
paths.scripts.input + '/../*.js',
|
|
||||||
paths.temp + '/*.js'
|
|
||||||
])
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(flatten())
|
|
||||||
.pipe(header(banner.full, { package : package }))
|
|
||||||
.pipe(gulp.dest(paths.scripts.output))
|
|
||||||
.pipe(rename({ suffix: '.min' }))
|
|
||||||
.pipe(uglify())
|
|
||||||
.pipe(header(banner.min, { package : package }))
|
|
||||||
.pipe(gulp.dest(paths.scripts.output));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Process, lint, and minify Sass files
|
|
||||||
gulp.task('styles', ['clean'], function() {
|
|
||||||
return gulp.src(paths.styles.input)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(sass({style: 'expanded', noCache: true}))
|
|
||||||
.pipe(flatten())
|
|
||||||
.pipe(prefix('last 2 version', '> 1%'))
|
|
||||||
.pipe(header(banner.full, { package : package }))
|
|
||||||
.pipe(gulp.dest(paths.styles.output))
|
|
||||||
.pipe(rename({ suffix: '.min' }))
|
|
||||||
.pipe(minify())
|
|
||||||
.pipe(header(banner.min, { package : package }))
|
|
||||||
.pipe(gulp.dest(paths.styles.output));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Copy static files into output folder
|
|
||||||
gulp.task('static', ['clean'], function() {
|
|
||||||
return gulp.src(paths.static)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(gulp.dest(paths.output));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Lint scripts
|
|
||||||
gulp.task('lint', function () {
|
|
||||||
return gulp.src(paths.scripts.input)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(jshint())
|
|
||||||
.pipe(jshint.reporter('jshint-stylish'));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Remove prexisting content from output and test folders
|
|
||||||
gulp.task('clean', function () {
|
|
||||||
return gulp.src([
|
|
||||||
paths.output,
|
|
||||||
paths.test.coverage,
|
|
||||||
paths.test.results
|
|
||||||
], { read: false })
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(clean());
|
|
||||||
});
|
|
||||||
|
|
||||||
// Remove temporary files
|
|
||||||
gulp.task('cleanTemp', ['scripts'], function () {
|
|
||||||
return gulp.src(paths.temp, { read: false })
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(clean());
|
|
||||||
});
|
|
||||||
|
|
||||||
// Run unit tests
|
|
||||||
gulp.task('test', function() {
|
|
||||||
return gulp.src([paths.scripts.input + '/../**/*.js'].concat(paths.test.spec))
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(karma({ configFile: 'test/karma.conf.js' }))
|
|
||||||
.on('error', function(err) { throw err; });
|
|
||||||
});
|
|
||||||
|
|
||||||
// Combine tasks into runner
|
|
||||||
gulp.task('default', [
|
|
||||||
'lint',
|
|
||||||
'clean',
|
|
||||||
'static',
|
|
||||||
'concatenate',
|
|
||||||
'scripts',
|
|
||||||
'styles',
|
|
||||||
'cleanTemp',
|
|
||||||
'test'
|
|
||||||
]);
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Smooth Scroll</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
|
|
||||||
<!-- HTML5 Shim for IE -->
|
|
||||||
<!--[if IE]>
|
|
||||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
||||||
<![endif]-->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body id="top">
|
|
||||||
<section style="width: 88%; max-width: 40em; margin-left: auto; margin-right: auto;">
|
|
||||||
|
|
||||||
<h1 style="text-align: center; font-size: 3em; margin-bottom: 0;">Smooth Scroll</h1>
|
|
||||||
<p style="text-align: center; font-size: 1.5em; margin: 0;">A lightweight script to animate scrolling to anchor links.</p>
|
|
||||||
<p style="text-align: center;"><a href="https://github.com/cferdinandi/smooth-scroll#readme">Smooth Scroll on GitHub</a></p>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<strong>Linear</strong><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "linear" }' href="#bazinga">Linear (no other options)</a><br>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<strong>Ease-In</strong><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeInQuad" }' href="#bazinga">Quad</a><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeInCubic" }' href="#bazinga">Cubic</a><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeInQuart" }' href="#bazinga">Quart</a><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeInQuint" }' href="#bazinga">Quint</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<strong>Ease-In-Out</strong><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeInOutQuad" }' href="#bazinga">Quad</a><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeInOutCubic" }' href="#bazinga">Cubic</a><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeInOutQuart" }' href="#bazinga">Quart</a><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeInOutQuint" }' href="#bazinga">Quint</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<strong>Ease-Out</strong><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeOutQuad" }' href="#bazinga">Quad</a><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeOutCubic" }' href="#bazinga">Cubic</a><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeOutQuart" }' href="#bazinga">Quart</a><br>
|
|
||||||
<a data-scroll data-options='{ "easing": "easeOutQuint" }' href="#bazinga">Quint</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
|
|
||||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
|
|
||||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p id="bazinga"><a data-scroll href="#1@#%^-bottom">Bazinga!</a></p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
|
|
||||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
|
|
||||||
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p id="1@#%^-bottom"><a data-scroll data-options='{ "easing": "easeOutCubic" }' href="#top">Back to the top</a></p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Javascript -->
|
|
||||||
<script src='dist/js/bind-polyfill.js'></script>
|
|
||||||
<script src='dist/js/smooth-scroll.js'></script>
|
|
||||||
<script>
|
|
||||||
smoothScroll.init({
|
|
||||||
speed: 1000,
|
|
||||||
easing: 'easeInOutCubic',
|
|
||||||
offset: 0,
|
|
||||||
updateURL: true,
|
|
||||||
callbackBefore: function ( toggle, anchor ) {},
|
|
||||||
callbackAfter: function ( toggle, anchor ) {}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "smooth-scroll",
|
|
||||||
"version": "5.1.2",
|
|
||||||
"description": "Animate scrolling to anchor links",
|
|
||||||
"author": {
|
|
||||||
"name": "Chris Ferdinandi",
|
|
||||||
"url": "http://gomakethings.com"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "http://github.com/cferdinandi/smooth-scroll"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"gulp": "~3.8.0",
|
|
||||||
"gulp-autoprefixer": "0.0.7",
|
|
||||||
"gulp-clean": "^0.2.4",
|
|
||||||
"gulp-concat": "~2.2.0",
|
|
||||||
"gulp-flatten": "~0.0.2",
|
|
||||||
"gulp-tap": "~0.1.1",
|
|
||||||
"gulp-header": "^1.0.2",
|
|
||||||
"gulp-jshint": "^1.6.1",
|
|
||||||
"gulp-karma": "0.0.4",
|
|
||||||
"gulp-minify-css": "~0.3.4",
|
|
||||||
"gulp-plumber": "~0.6.2",
|
|
||||||
"gulp-rename": "~1.1.0",
|
|
||||||
"gulp-ruby-sass": "~0.7.1",
|
|
||||||
"gulp-uglify": "~0.3.0",
|
|
||||||
"jshint-stylish": "^0.2.0",
|
|
||||||
"karma": "^0.12.16",
|
|
||||||
"karma-coverage": "^0.2.4",
|
|
||||||
"karma-jasmine": "~0.2.0",
|
|
||||||
"karma-phantomjs-launcher": "^0.1.4",
|
|
||||||
"karma-spec-reporter": "0.0.13",
|
|
||||||
"karma-htmlfile-reporter": "~0.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
/*
|
|
||||||
* Polyfill Function.prototype.bind support for otherwise ECMA Script 5 compliant browsers
|
|
||||||
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Compatibility
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (!Function.prototype.bind) {
|
|
||||||
Function.prototype.bind = function (oThis) {
|
|
||||||
if (typeof this !== "function") {
|
|
||||||
// closest thing possible to the ECMAScript 5
|
|
||||||
// internal IsCallable function
|
|
||||||
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
|
|
||||||
}
|
|
||||||
|
|
||||||
var aArgs = Array.prototype.slice.call(arguments, 1);
|
|
||||||
var fToBind = this;
|
|
||||||
fNOP = function () {};
|
|
||||||
fBound = function () {
|
|
||||||
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
|
|
||||||
};
|
|
||||||
|
|
||||||
fNOP.prototype = this.prototype;
|
|
||||||
fBound.prototype = new fNOP();
|
|
||||||
|
|
||||||
return fBound;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,384 +0,0 @@
|
|||||||
(function (root, factory) {
|
|
||||||
if ( typeof define === 'function' && define.amd ) {
|
|
||||||
define('smoothScroll', factory(root));
|
|
||||||
} else if ( typeof exports === 'object' ) {
|
|
||||||
module.exports = factory(root);
|
|
||||||
} else {
|
|
||||||
root.smoothScroll = factory(root);
|
|
||||||
}
|
|
||||||
})(this, function (root) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
//
|
|
||||||
// Variables
|
|
||||||
//
|
|
||||||
|
|
||||||
var smoothScroll = {}; // Object for public APIs
|
|
||||||
var supports = !!document.querySelector && !!root.addEventListener; // Feature test
|
|
||||||
var settings;
|
|
||||||
|
|
||||||
// Default settings
|
|
||||||
var defaults = {
|
|
||||||
speed: 500,
|
|
||||||
easing: 'easeInOutCubic',
|
|
||||||
offset: 0,
|
|
||||||
updateURL: true,
|
|
||||||
callbackBefore: function () {},
|
|
||||||
callbackAfter: function () {}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Methods
|
|
||||||
//
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A simple forEach() implementation for Arrays, Objects and NodeLists
|
|
||||||
* @private
|
|
||||||
* @param {Array|Object|NodeList} collection Collection of items to iterate
|
|
||||||
* @param {Function} callback Callback function for each iteration
|
|
||||||
* @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
|
|
||||||
*/
|
|
||||||
var forEach = function (collection, callback, scope) {
|
|
||||||
if (Object.prototype.toString.call(collection) === '[object Object]') {
|
|
||||||
for (var prop in collection) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(collection, prop)) {
|
|
||||||
callback.call(scope, collection[prop], prop, collection);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (var i = 0, len = collection.length; i < len; i++) {
|
|
||||||
callback.call(scope, collection[i], i, collection);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Merge defaults with user options
|
|
||||||
* @private
|
|
||||||
* @param {Object} defaults Default settings
|
|
||||||
* @param {Object} options User options
|
|
||||||
* @returns {Object} Merged values of defaults and options
|
|
||||||
*/
|
|
||||||
var extend = function ( defaults, options ) {
|
|
||||||
var extended = {};
|
|
||||||
forEach(defaults, function (value, prop) {
|
|
||||||
extended[prop] = defaults[prop];
|
|
||||||
});
|
|
||||||
forEach(options, function (value, prop) {
|
|
||||||
extended[prop] = options[prop];
|
|
||||||
});
|
|
||||||
return extended;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the closest matching element up the DOM tree
|
|
||||||
* @param {Element} elem Starting element
|
|
||||||
* @param {String} selector Selector to match against (class, ID, or data attribute)
|
|
||||||
* @return {Boolean|Element} Returns false if not match found
|
|
||||||
*/
|
|
||||||
var getClosest = function (elem, selector) {
|
|
||||||
var firstChar = selector.charAt(0);
|
|
||||||
for ( ; elem && elem !== document; elem = elem.parentNode ) {
|
|
||||||
if ( firstChar === '.' ) {
|
|
||||||
if ( elem.classList.contains( selector.substr(1) ) ) {
|
|
||||||
return elem;
|
|
||||||
}
|
|
||||||
} else if ( firstChar === '#' ) {
|
|
||||||
if ( elem.id === selector.substr(1) ) {
|
|
||||||
return elem;
|
|
||||||
}
|
|
||||||
} else if ( firstChar === '[' ) {
|
|
||||||
if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
|
|
||||||
return elem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Escape special characters for use with querySelector
|
|
||||||
* @private
|
|
||||||
* @param {String} id The anchor ID to escape
|
|
||||||
* @author Mathias Bynens
|
|
||||||
* @link https://github.com/mathiasbynens/CSS.escape
|
|
||||||
*/
|
|
||||||
var escapeCharacters = function ( id ) {
|
|
||||||
var string = String(id);
|
|
||||||
var length = string.length;
|
|
||||||
var index = -1;
|
|
||||||
var codeUnit;
|
|
||||||
var result = '';
|
|
||||||
var firstCodeUnit = string.charCodeAt(0);
|
|
||||||
while (++index < length) {
|
|
||||||
codeUnit = string.charCodeAt(index);
|
|
||||||
// Note: there’s no need to special-case astral symbols, surrogate
|
|
||||||
// pairs, or lone surrogates.
|
|
||||||
|
|
||||||
// If the character is NULL (U+0000), then throw an
|
|
||||||
// `InvalidCharacterError` exception and terminate these steps.
|
|
||||||
if (codeUnit === 0x0000) {
|
|
||||||
throw new InvalidCharacterError(
|
|
||||||
'Invalid character: the input contains U+0000.'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
|
|
||||||
// U+007F, […]
|
|
||||||
(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
|
|
||||||
// If the character is the first character and is in the range [0-9]
|
|
||||||
// (U+0030 to U+0039), […]
|
|
||||||
(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
|
|
||||||
// If the character is the second character and is in the range [0-9]
|
|
||||||
// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
|
|
||||||
(
|
|
||||||
index === 1 &&
|
|
||||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
|
|
||||||
firstCodeUnit === 0x002D
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point
|
|
||||||
result += '\\' + codeUnit.toString(16) + ' ';
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the character is not handled by one of the above rules and is
|
|
||||||
// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
|
|
||||||
// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
|
|
||||||
// U+005A), or [a-z] (U+0061 to U+007A), […]
|
|
||||||
if (
|
|
||||||
codeUnit >= 0x0080 ||
|
|
||||||
codeUnit === 0x002D ||
|
|
||||||
codeUnit === 0x005F ||
|
|
||||||
codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
|
|
||||||
codeUnit >= 0x0041 && codeUnit <= 0x005A ||
|
|
||||||
codeUnit >= 0x0061 && codeUnit <= 0x007A
|
|
||||||
) {
|
|
||||||
// the character itself
|
|
||||||
result += string.charAt(index);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Otherwise, the escaped character.
|
|
||||||
// http://dev.w3.org/csswg/cssom/#escape-a-character
|
|
||||||
result += '\\' + string.charAt(index);
|
|
||||||
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Calculate the easing pattern
|
|
||||||
* @private
|
|
||||||
* @param {String} type Easing pattern
|
|
||||||
* @param {Number} time Time animation should take to complete
|
|
||||||
* @returns {Number}
|
|
||||||
*/
|
|
||||||
var easingPattern = function ( type, time ) {
|
|
||||||
var pattern;
|
|
||||||
if ( type === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity
|
|
||||||
if ( type === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity
|
|
||||||
if ( type === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
|
|
||||||
if ( type === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity
|
|
||||||
if ( type === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity
|
|
||||||
if ( type === 'easeInOutCubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
|
|
||||||
if ( type === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity
|
|
||||||
if ( type === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity
|
|
||||||
if ( type === 'easeInOutQuart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
|
|
||||||
if ( type === 'easeInQuint' ) pattern = time * time * time * time * time; // accelerating from zero velocity
|
|
||||||
if ( type === 'easeOutQuint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity
|
|
||||||
if ( type === 'easeInOutQuint' ) pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
|
|
||||||
return pattern || time; // no easing, no acceleration
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Calculate how far to scroll
|
|
||||||
* @private
|
|
||||||
* @param {Element} anchor The anchor element to scroll to
|
|
||||||
* @param {Number} headerHeight Height of a fixed header, if any
|
|
||||||
* @param {Number} offset Number of pixels by which to offset scroll
|
|
||||||
* @returns {Number}
|
|
||||||
*/
|
|
||||||
var getEndLocation = function ( anchor, headerHeight, offset ) {
|
|
||||||
var location = 0;
|
|
||||||
if (anchor.offsetParent) {
|
|
||||||
do {
|
|
||||||
location += anchor.offsetTop;
|
|
||||||
anchor = anchor.offsetParent;
|
|
||||||
} while (anchor);
|
|
||||||
}
|
|
||||||
location = location - headerHeight - offset;
|
|
||||||
return location >= 0 ? location : 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Determine the document's height
|
|
||||||
* @private
|
|
||||||
* @returns {Number}
|
|
||||||
*/
|
|
||||||
var getDocumentHeight = function () {
|
|
||||||
return Math.max(
|
|
||||||
document.body.scrollHeight, document.documentElement.scrollHeight,
|
|
||||||
document.body.offsetHeight, document.documentElement.offsetHeight,
|
|
||||||
document.body.clientHeight, document.documentElement.clientHeight
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Convert data-options attribute into an object of key/value pairs
|
|
||||||
* @private
|
|
||||||
* @param {String} options Link-specific options as a data attribute string
|
|
||||||
* @returns {Object}
|
|
||||||
*/
|
|
||||||
var getDataOptions = function ( options ) {
|
|
||||||
return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options );
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update the URL
|
|
||||||
* @private
|
|
||||||
* @param {Element} anchor The element to scroll to
|
|
||||||
* @param {Boolean} url Whether or not to update the URL history
|
|
||||||
*/
|
|
||||||
var updateUrl = function ( anchor, url ) {
|
|
||||||
if ( history.pushState && (url || url === 'true') ) {
|
|
||||||
history.pushState( {
|
|
||||||
pos: anchor.id
|
|
||||||
}, '', window.location.pathname + anchor );
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Start/stop the scrolling animation
|
|
||||||
* @public
|
|
||||||
* @param {Element} toggle The element that toggled the scroll event
|
|
||||||
* @param {Element} anchor The element to scroll to
|
|
||||||
* @param {Object} settings
|
|
||||||
* @param {Event} event
|
|
||||||
*/
|
|
||||||
smoothScroll.animateScroll = function ( toggle, anchor, options ) {
|
|
||||||
|
|
||||||
// Options and overrides
|
|
||||||
var settings = extend( settings || defaults, options || {} ); // Merge user options with defaults
|
|
||||||
var overrides = getDataOptions( toggle ? toggle.getAttribute('data-options') : null );
|
|
||||||
settings = extend( settings, overrides );
|
|
||||||
anchor = '#' + escapeCharacters(anchor.substr(1)); // Escape special characters and leading numbers
|
|
||||||
|
|
||||||
// Selectors and variables
|
|
||||||
var fixedHeader = document.querySelector('[data-scroll-header]'); // Get the fixed header
|
|
||||||
var headerHeight = fixedHeader === null ? 0 : (fixedHeader.offsetHeight + fixedHeader.offsetTop); // Get the height of a fixed header if one exists
|
|
||||||
var startLocation = root.pageYOffset; // Current location on the page
|
|
||||||
var endLocation = getEndLocation( document.querySelector(anchor), headerHeight, parseInt(settings.offset, 10) ); // Scroll to location
|
|
||||||
var animationInterval; // interval timer
|
|
||||||
var distance = endLocation - startLocation; // distance to travel
|
|
||||||
var documentHeight = getDocumentHeight();
|
|
||||||
var timeLapsed = 0;
|
|
||||||
var percentage, position;
|
|
||||||
|
|
||||||
// Update URL
|
|
||||||
updateUrl(anchor, settings.updateURL);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stop the scroll animation when it reaches its target (or the bottom/top of page)
|
|
||||||
* @private
|
|
||||||
* @param {Number} position Current position on the page
|
|
||||||
* @param {Number} endLocation Scroll to location
|
|
||||||
* @param {Number} animationInterval How much to scroll on this loop
|
|
||||||
*/
|
|
||||||
var stopAnimateScroll = function (position, endLocation, animationInterval) {
|
|
||||||
var currentLocation = root.pageYOffset;
|
|
||||||
if ( position == endLocation || currentLocation == endLocation || ( (root.innerHeight + currentLocation) >= documentHeight ) ) {
|
|
||||||
clearInterval(animationInterval);
|
|
||||||
settings.callbackAfter( toggle, anchor ); // Run callbacks after animation complete
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Loop scrolling animation
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
var loopAnimateScroll = function () {
|
|
||||||
timeLapsed += 16;
|
|
||||||
percentage = ( timeLapsed / parseInt(settings.speed, 10) );
|
|
||||||
percentage = ( percentage > 1 ) ? 1 : percentage;
|
|
||||||
position = startLocation + ( distance * easingPattern(settings.easing, percentage) );
|
|
||||||
root.scrollTo( 0, Math.floor(position) );
|
|
||||||
stopAnimateScroll(position, endLocation, animationInterval);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set interval timer
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
var startAnimateScroll = function () {
|
|
||||||
settings.callbackBefore( toggle, anchor ); // Run callbacks before animating scroll
|
|
||||||
animationInterval = setInterval(loopAnimateScroll, 16);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reset position to fix weird iOS bug
|
|
||||||
* @link https://github.com/cferdinandi/smooth-scroll/issues/45
|
|
||||||
*/
|
|
||||||
if ( root.pageYOffset === 0 ) {
|
|
||||||
root.scrollTo( 0, 0 );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start scrolling animation
|
|
||||||
startAnimateScroll();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* If smooth scroll element clicked, animate scroll
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
var eventHandler = function (event) {
|
|
||||||
var toggle = getClosest(event.target, '[data-scroll]');
|
|
||||||
if ( toggle && toggle.tagName.toLowerCase() === 'a' ) {
|
|
||||||
event.preventDefault(); // Prevent default click event
|
|
||||||
smoothScroll.animateScroll( toggle, toggle.hash, settings, event ); // Animate scroll
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Destroy the current initialization.
|
|
||||||
* @public
|
|
||||||
*/
|
|
||||||
smoothScroll.destroy = function () {
|
|
||||||
if ( !settings ) return;
|
|
||||||
document.removeEventListener( 'click', eventHandler, false );
|
|
||||||
settings = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize Smooth Scroll
|
|
||||||
* @public
|
|
||||||
* @param {Object} options User settings
|
|
||||||
*/
|
|
||||||
smoothScroll.init = function ( options ) {
|
|
||||||
|
|
||||||
// feature test
|
|
||||||
if ( !supports ) return;
|
|
||||||
|
|
||||||
// Destroy any existing initializations
|
|
||||||
smoothScroll.destroy();
|
|
||||||
|
|
||||||
// Selectors and variables
|
|
||||||
settings = extend( defaults, options || {} ); // Merge user options with defaults
|
|
||||||
|
|
||||||
// When a toggle is clicked, run the click handler
|
|
||||||
document.addEventListener('click', eventHandler, false);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Public APIs
|
|
||||||
//
|
|
||||||
|
|
||||||
return smoothScroll;
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
module.exports = function (config) {
|
|
||||||
config.set({
|
|
||||||
basePath : '',
|
|
||||||
autoWatch : true,
|
|
||||||
frameworks: ['jasmine'],
|
|
||||||
browsers : ['PhantomJS'],
|
|
||||||
plugins : [
|
|
||||||
'karma-spec-reporter',
|
|
||||||
'karma-phantomjs-launcher',
|
|
||||||
'karma-jasmine',
|
|
||||||
'karma-coverage',
|
|
||||||
'karma-htmlfile-reporter'
|
|
||||||
],
|
|
||||||
reporters : ['spec', 'coverage', 'html'],
|
|
||||||
preprocessors: {
|
|
||||||
'../src/js/**/*.js': 'coverage'
|
|
||||||
},
|
|
||||||
coverageReporter: {
|
|
||||||
type : 'html',
|
|
||||||
dir : 'coverage/'
|
|
||||||
},
|
|
||||||
htmlReporter: {
|
|
||||||
outputFile: 'results/unit-tests.html'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
describe('Smooth Scroll', function () {
|
|
||||||
|
|
||||||
describe('init', function () {
|
|
||||||
it('should include the smoothScroll module', function () {
|
|
||||||
expect(!!smoothScroll).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
Loading…
x
Reference in New Issue
Block a user