mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-08-25 11:11:46 +08:00
First commit: add type definitions for slick 1.5.8
This commit is contained in:
emmanuel
@@ -0,0 +1,232 @@
|
||||
///<reference path="../jquery/jquery.d.ts" />
|
||||
///<reference path="/jquery.slick/slick.d.ts" />
|
||||
|
||||
|
||||
// --------------------------------------------------------
|
||||
// ------------------- WEBSITE EXAMPLE --------------------
|
||||
// ---------- http://kenwheeler.github.io/slick/ ----------
|
||||
// --------------------------------------------------------
|
||||
|
||||
$('.single-item').slick();
|
||||
|
||||
$('.multiple-items').slick({
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
|
||||
$('.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
|
||||
}
|
||||
}
|
||||
// You can unslick at a given breakpoint now by adding:
|
||||
// settings: "unslick"
|
||||
// instead of a settings object
|
||||
]
|
||||
});
|
||||
|
||||
$('.variable-width').slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 1,
|
||||
centerMode: true,
|
||||
variableWidth: true
|
||||
});
|
||||
|
||||
$('.one-time').slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 1,
|
||||
adaptiveHeight: true
|
||||
});
|
||||
|
||||
$('.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
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 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
|
||||
});
|
||||
|
||||
$('.autoplay').slick({
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 2000,
|
||||
});
|
||||
|
||||
$('.fade').slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
fade: true,
|
||||
cssEase: 'linear'
|
||||
});
|
||||
|
||||
var slideIndex = 1;
|
||||
$('.add-remove').slick({
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3
|
||||
});
|
||||
$('.js-add-slide').on('click', function() {
|
||||
slideIndex++;
|
||||
$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
|
||||
});
|
||||
|
||||
$('.js-remove-slide').on('click', function() {
|
||||
$('.add-remove').slick('slickRemove', slideIndex - 1);
|
||||
if (slideIndex !== 0){
|
||||
slideIndex--;
|
||||
}
|
||||
});
|
||||
|
||||
$('.filtering').slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4
|
||||
});
|
||||
|
||||
var filtered = false;
|
||||
|
||||
$('.js-filter').on('click', function(){
|
||||
if (filtered === false) {
|
||||
$('.filtering').slick('slickFilter',':even');
|
||||
$(this).text('Unfilter Slides');
|
||||
filtered = true;
|
||||
} else {
|
||||
$('.filtering').slick('slickUnfilter');
|
||||
$(this).text('Filter Slides');
|
||||
filtered = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.your-slider').slick('unslick');
|
||||
|
||||
$('.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
|
||||
});
|
||||
|
||||
$('.single-item-rtl').slick({
|
||||
rtl: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
// --------------------------------------------------------
|
||||
// ---------------- TEST DEFAULT OPTIONS ------------------
|
||||
// --------------------------------------------------------
|
||||
|
||||
$("#diaporama").slick({
|
||||
accessibility: true,
|
||||
adaptiveHeight: false,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 3000,
|
||||
arrows: true,
|
||||
asNavFor: "#slideshow",
|
||||
appendArrows: "",
|
||||
prevArrow: "<button type=\"button\" class=\"slick-prev\">Previous</button>",
|
||||
nextArrow: "<button type=\"button\" class=\"slick-next\">Next</button>",
|
||||
centerMode: false,
|
||||
centerPadding: "50px",
|
||||
cssEase: "ease",
|
||||
customPaging: (slider, i: number) => {
|
||||
console.log("customPaging slider", slider);
|
||||
console.log("customPaging index", i);
|
||||
},
|
||||
dots: false,
|
||||
draggable: true,
|
||||
fade: false,
|
||||
focusOnSelect: false,
|
||||
easing: "linear",
|
||||
edgeFriction: 0.15,
|
||||
infinite: true,
|
||||
initialSlide: 0,
|
||||
lazyLoad: "ondemand",
|
||||
mobileFirst: false,
|
||||
pauseOnHover: true,
|
||||
pauseOnDotsHover: false,
|
||||
respondTo: "window",
|
||||
responsive: null,
|
||||
rows: 1,
|
||||
slide: "div",
|
||||
slidesPerRow: 1,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
speed: 300,
|
||||
swipe: true,
|
||||
swipeToSlide: false,
|
||||
touchMove: true,
|
||||
touchThreshold: 5,
|
||||
useCSS: true,
|
||||
variableWidth: false,
|
||||
vertical: false,
|
||||
verticalSwiping: false,
|
||||
rtl: false
|
||||
});
|
||||
Vendored
+381
@@ -0,0 +1,381 @@
|
||||
// Type definitions for stick 1.5.8
|
||||
// Project: http://kenwheeler.github.io/slick/
|
||||
// Definitions by: John Gouigouix <https://github.com/orchestra-ts/DefinitelyTyped/>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference path="../jquery/jquery.d.ts"/>
|
||||
|
||||
interface JQuerySlickOptions {
|
||||
|
||||
/**
|
||||
* Enables tabbing and arrow key navigation
|
||||
* Default: true
|
||||
*/
|
||||
accessibility?: boolean;
|
||||
|
||||
/**
|
||||
* Enables adaptive height for single slide horizontal carousels.
|
||||
* Default: false
|
||||
*/
|
||||
adaptiveHeight?: boolean;
|
||||
|
||||
/**
|
||||
* Enables Autoplay
|
||||
* Default: false
|
||||
*/
|
||||
autoplay?: boolean;
|
||||
|
||||
/**
|
||||
* Autoplay Speed in milliseconds
|
||||
* Default: 3000
|
||||
*/
|
||||
autoplaySpeed?: number;
|
||||
|
||||
/**
|
||||
* Prev/Next Arrows
|
||||
* Default: true
|
||||
*/
|
||||
arrows?: boolean;
|
||||
|
||||
/**
|
||||
* Set the slider to be the navigation of other slider (Class or ID Name)
|
||||
* Default: null
|
||||
*/
|
||||
asNavFor?: string;
|
||||
|
||||
/**
|
||||
* Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
|
||||
* Default: $(element)
|
||||
*/
|
||||
appendArrows?: any;
|
||||
|
||||
/**
|
||||
* Allows you to select a node or customize the HTML for the "Previous" arrow.
|
||||
* Default: <button type="button" class="slick-prev">Previous</button>
|
||||
*/
|
||||
prevArrow?: string | Object;
|
||||
|
||||
/**
|
||||
* Allows you to select a node or customize the HTML for the "Next" arrow.
|
||||
* Default: <button type="button" class="slick-next">Next</button>
|
||||
*/
|
||||
nextArrow?: string | Object;
|
||||
|
||||
/**
|
||||
* Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
|
||||
* Default: false
|
||||
*/
|
||||
centerMode?: boolean;
|
||||
|
||||
/**
|
||||
* Side padding when in center mode (px or %)
|
||||
* Default: '50px'
|
||||
*/
|
||||
centerPadding?: string;
|
||||
|
||||
/**
|
||||
* CSS3 Animation Easing
|
||||
* Default: 'ease'
|
||||
*/
|
||||
cssEase?: string;
|
||||
|
||||
/**
|
||||
* Custom paging templates. See source for use example.
|
||||
* Default: n/a
|
||||
*/
|
||||
customPaging?: (slider, i: number) => string;
|
||||
|
||||
/**
|
||||
* Show dot indicators
|
||||
* Default: false
|
||||
*/
|
||||
dots?: boolean;
|
||||
|
||||
/**
|
||||
* Enable mouse dragging
|
||||
* Default: true
|
||||
*/
|
||||
draggable?: boolean;
|
||||
|
||||
/**
|
||||
* Enable fade
|
||||
* Default: false
|
||||
*/
|
||||
fade?: boolean;
|
||||
|
||||
/**
|
||||
* Enable focus on selected element (click)
|
||||
* Default: false
|
||||
*/
|
||||
focusOnSelect?: boolean;
|
||||
|
||||
/**
|
||||
* Add easing for jQuery animate. Use with easing libraries or default easing methods
|
||||
* Default: 'linear'
|
||||
*/
|
||||
easing?: string;
|
||||
|
||||
/**
|
||||
* Resistance when swiping edges of non-infinite carousels
|
||||
* Default: 0.15
|
||||
*/
|
||||
edgeFriction?: number;
|
||||
|
||||
/**
|
||||
* Infinite loop sliding
|
||||
* Default: true
|
||||
*/
|
||||
infinite?: boolean;
|
||||
|
||||
/**
|
||||
* Slide to start on
|
||||
* Default: 0
|
||||
*/
|
||||
initialSlide?: number;
|
||||
|
||||
/**
|
||||
* Set lazy loading technique. Accepts 'ondemand' or 'progressive'.
|
||||
* Default: 'ondemand'
|
||||
*/
|
||||
lazyLoad?: string;
|
||||
|
||||
/**
|
||||
* Responsive settings use mobile first calculation
|
||||
* Default: false
|
||||
*/
|
||||
mobileFirst?: boolean;
|
||||
|
||||
/**
|
||||
* Pause Autoplay On Hover
|
||||
* Default: true
|
||||
*/
|
||||
pauseOnHover?: boolean;
|
||||
|
||||
/**
|
||||
* Pause Autoplay when a dot is hovered
|
||||
* Default: false
|
||||
*/
|
||||
pauseOnDotsHover?: boolean;
|
||||
|
||||
/**
|
||||
* Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two)
|
||||
* Default: 'window'
|
||||
*/
|
||||
respondTo?: string;
|
||||
|
||||
/**
|
||||
* Object containing breakpoints and settings objects (see demo).
|
||||
* Enables settings sets at given screen width.
|
||||
* Set settings to "unslick" instead of an object to disable slick at a given breakpoint.
|
||||
* Default: none
|
||||
*/
|
||||
responsive?: Object;
|
||||
|
||||
/**
|
||||
* Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
|
||||
* Default: 1
|
||||
*/
|
||||
rows?: number;
|
||||
|
||||
/**
|
||||
* Element query to use as slide
|
||||
* Default: 'div'
|
||||
*/
|
||||
slide?: string;
|
||||
|
||||
/**
|
||||
* With grid mode intialized via the rows option, this sets how many slides are in each grid row.
|
||||
* Default: 1
|
||||
*/
|
||||
slidesPerRow?: number;
|
||||
|
||||
/**
|
||||
* # of slides to show
|
||||
* Default: 1
|
||||
*/
|
||||
slidesToShow?: number;
|
||||
|
||||
/**
|
||||
* # of slides to scroll
|
||||
* Default: 1
|
||||
*/
|
||||
slidesToScroll?: number;
|
||||
|
||||
/**
|
||||
* Slide/Fade animation speed (ms)
|
||||
* Default: 300
|
||||
*/
|
||||
speed?: number;
|
||||
|
||||
/**
|
||||
* Enable swiping
|
||||
* Default: true
|
||||
*/
|
||||
swipe?: boolean;
|
||||
|
||||
/**
|
||||
* Allow users to drag or swipe directly to a slide irrespective of slidesToScroll.
|
||||
* Default: false
|
||||
*/
|
||||
swipeToSlide?: boolean;
|
||||
|
||||
/**
|
||||
* Enable slide motion with touch
|
||||
* Default: true
|
||||
*/
|
||||
touchMove?: boolean;
|
||||
|
||||
/**
|
||||
* To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
|
||||
* Default: 5
|
||||
*/
|
||||
touchThreshold?: number;
|
||||
|
||||
/**
|
||||
* Enable/Disable CSS Transitions
|
||||
* Default: true
|
||||
*/
|
||||
useCSS?: boolean;
|
||||
|
||||
/**
|
||||
* Variable width slides.
|
||||
* Default: false
|
||||
*/
|
||||
variableWidth?: boolean;
|
||||
|
||||
/**
|
||||
* Vertical slide mode
|
||||
* Default: false
|
||||
*/
|
||||
vertical?: boolean;
|
||||
|
||||
/**
|
||||
* Vertical swipe mode
|
||||
* Default: false
|
||||
*/
|
||||
verticalSwiping?: boolean;
|
||||
|
||||
/**
|
||||
* Change the slider's direction to become right-to-left
|
||||
* Default: false
|
||||
*/
|
||||
rtl?: boolean;
|
||||
|
||||
}
|
||||
|
||||
|
||||
interface JQuery {
|
||||
|
||||
/**
|
||||
* Create slick component
|
||||
*/
|
||||
slick(): JQuery;
|
||||
slick(options: JQuerySlickOptions): JQuery;
|
||||
|
||||
/**
|
||||
* Returns the current slide index
|
||||
* @param methodName The name of the method
|
||||
*/
|
||||
slick(methodName: "slickCurrentSlide"): number;
|
||||
|
||||
/**
|
||||
* Navigates to a slide by index
|
||||
* @param methodName The name of the method
|
||||
* @param slide
|
||||
* @param animate
|
||||
*/
|
||||
slick(methodName: "slickGoTo", slide: number, animate?: boolean): JQuery;
|
||||
|
||||
/**
|
||||
* Navigates to the next slide
|
||||
* @param methodName The name of the method
|
||||
*/
|
||||
slick(methodName: "slickNext"): JQuery;
|
||||
|
||||
/**
|
||||
* Navigates to the previous slide
|
||||
* @param methodName The name of the method
|
||||
*/
|
||||
slick(methodName: "slickPrev"): JQuery;
|
||||
|
||||
/**
|
||||
* Pauses autoplay
|
||||
* @param methodName The name of the method
|
||||
*/
|
||||
slick(methodName: "slickPause"): JQuery;
|
||||
|
||||
/**
|
||||
* Starts autoplay
|
||||
* @param methodName The name of the method
|
||||
*/
|
||||
slick(methodName: "slickPlay"): JQuery;
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @param methodName The name of the method
|
||||
* @param html
|
||||
* @param index/div>
|
||||
* @param addBefore
|
||||
*/
|
||||
slick(methodName: "slickAdd", html: string | Object, index?: number, addBefore?: number): JQuery;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
* @param methodName The name of the method
|
||||
* @param index
|
||||
* @param removeBefore
|
||||
*/
|
||||
slick(methodName: "slickRemove", index: number, removeBefore?: number): JQuery;
|
||||
|
||||
/**
|
||||
* Filters slides using jQuery .filter()
|
||||
* @param methodName The name of the method
|
||||
* @param selector
|
||||
*/
|
||||
slick(methodName : "slickFilter", selector: string): JQuery;
|
||||
|
||||
/**
|
||||
* Filters slides using jQuery .filter()
|
||||
* @param methodName The name of the method
|
||||
* @param func
|
||||
*/
|
||||
slick(methodName : "slickFilter", func: (index: number, element: Element) => any): JQuery;
|
||||
|
||||
/**
|
||||
* Removes applied filtering
|
||||
* @param methodName The name of the method
|
||||
* @param index
|
||||
*/
|
||||
slick(methodName: "slickUnfilter", index: number): JQuery;
|
||||
|
||||
/**
|
||||
* Sets an individual value live. Set refresh to true if it's a UI update.
|
||||
* @param methodName The name of the method
|
||||
* @param option The option name
|
||||
*/
|
||||
slick(methodName: "slickGetOption", option: any): JQuerySlickOptions;
|
||||
|
||||
/**
|
||||
* Sets an individual value live. Set refresh to true if it's a UI update.
|
||||
* @param methodName The name of the method
|
||||
* @param option The option name
|
||||
* @param value depends on option
|
||||
* @param refresh
|
||||
*/
|
||||
slick(methodName: "slickSetOption", option: string, value: JQuerySlickOptions, refresh?: boolean): JQuery;
|
||||
|
||||
/**
|
||||
* Deconstructs slick
|
||||
* @param methodName The name of the method
|
||||
*/
|
||||
slick(methodName: "unslick"): JQuery;
|
||||
|
||||
/**
|
||||
* Get Slick Object
|
||||
* @param methodName "getSlick"
|
||||
*/
|
||||
slick(methodName: "getSlick"): Object;
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user