diff --git a/jquery.slick/slick-tests.ts b/jquery.slick/slick-tests.ts new file mode 100644 index 000000000..499e6974c --- /dev/null +++ b/jquery.slick/slick-tests.ts @@ -0,0 +1,232 @@ +/// +/// + + +// -------------------------------------------------------- +// ------------------- 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 +// + +$('.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','

' + slideIndex + '

'); +}); + +$('.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: "", + nextArrow: "", + 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 +}); diff --git a/jquery.slick/slick.d.ts b/jquery.slick/slick.d.ts new file mode 100644 index 000000000..cc9aa626b --- /dev/null +++ b/jquery.slick/slick.d.ts @@ -0,0 +1,381 @@ +// Type definitions for stick 1.5.8 +// Project: http://kenwheeler.github.io/slick/ +// Definitions by: John Gouigouix +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +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: + */ + prevArrow?: string | Object; + + /** + * Allows you to select a node or customize the HTML for the "Next" arrow. + * Default: + */ + 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; + +}