{"id":13516807,"url":"https://github.com/bqworks/slider-pro-js","last_synced_at":"2025-04-15T17:58:37.245Z","repository":{"id":64887967,"uuid":"578610510","full_name":"bqworks/slider-pro-js","owner":"bqworks","description":"Modular JavaScript slider that is dependency-free, rich-featured, flexible and easy to use.","archived":false,"fork":false,"pushed_at":"2024-06-13T14:21:05.000Z","size":366,"stargazers_count":18,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T23:11:22.990Z","etag":null,"topics":["carousel","gallery","javascript-slider","layers","modular","slider","slideshow","swipe","thumbnails","touch","video"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bqworks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-15T13:14:56.000Z","updated_at":"2025-03-20T10:54:07.000Z","dependencies_parsed_at":"2024-11-08T16:34:32.356Z","dependency_job_id":"049cfd5b-fd96-4eb1-acf9-f9a3eee9b184","html_url":"https://github.com/bqworks/slider-pro-js","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bqworks%2Fslider-pro-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bqworks%2Fslider-pro-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bqworks%2Fslider-pro-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bqworks%2Fslider-pro-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bqworks","download_url":"https://codeload.github.com/bqworks/slider-pro-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249125959,"owners_count":21216705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","gallery","javascript-slider","layers","modular","slider","slideshow","swipe","thumbnails","touch","video"],"created_at":"2024-08-01T05:01:26.093Z","updated_at":"2025-04-15T17:58:37.216Z","avatar_url":"https://github.com/bqworks.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/slider-pro-js)](https://www.npmjs.com/package/slider-pro-js)\n[![License](https://img.shields.io/github/license/bqworks/slider-pro-js)](https://github.com/bqworks/slider-pro-js/blob/master/LICENSE)\n[![Build](https://github.com/bqworks/slider-pro-js/actions/workflows/build.yml/badge.svg)](https://github.com/bqworks/slider-pro-js/actions/workflows/build.yml)\n[![Tests](https://github.com/bqworks/slider-pro-js/actions/workflows/test.yml/badge.svg)](https://github.com/bqworks/slider-pro-js/actions/workflows/test.yml)\n[![Downloads](https://img.shields.io/npm/dt/slider-pro-js)](https://github.com/bqworks/slider-pro-js)\n\n# Slider Pro JS #\n\nA modular JavaScript slider that is __dependency-free__, __rich-featured__, __flexible__ and __easy to use__. \n\n*Main features:* \n\n* Modular architecture\n* Responsive\n* Touch-swipe support\n* CSS3 transitions\n* Animated layers (and static)\n* Infinite scrolling\n* Carousel layout\n* Different sized slides/images\n* Full Width and Full Window support\n* Thumbnails\n* Lazy loading\n* Fade effect\n* Full-screen support\n* Video content support\n* Conditional images (different images for different screen sizes)\n* JavaScript breakpoints \n\nSee some [examples](https://bqworks.net/slider-pro/) on the [presentation page](https://bqworks.net/slider-pro/).\n\nThe slider is also available as a [jQuery plugin](https://github.com/bqworks/slider-pro) and as a [WordPress plugin](https://wordpress.org/plugins/sliderpro/).\n\n## Getting started ##\n\n### 1. Get a copy of the plugin ###\n\nYou can fork or download the plugin from GitHub, or you can install it through `npm`.\n\n```\n$ npm install slider-pro-js\n```\n\n### 2. Load the required files ###\n\nYou can either load the minimized JS and CSS files in your HTML or you can import the files as modules.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"slider-pro-js/build/slider-pro.css\"/\u003e\n\u003cscript type=\"text/javascript\" src=\"slider-pro-js/build/slider-pro.js\"\u003e\u003c/script\u003e\n```\n\nFrom unpkg.com:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/slider-pro-js/build/slider-pro.css\"/\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/slider-pro-js/build/slider-pro.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively you can import the slider's core and each add-on from the `slider-pro-js` package.\n\n```js\nimport SliderPro, { Autoplay, Buttons, Thumbnails } from 'slider-pro-js';\n```\n\nYou can also import the CSS, either the entire code or for each individual module:\n\n```js\n// imports the entire CSS code\nimport 'slider-pro-js/css';\n```\n\n```js\n// imports the CSS code for the core and for each individual add-on\nimport 'slider-pro-js/css/core';\nimport 'slider-pro-js/css/buttons';\nimport 'slider-pro-js/css/thumbnails';\nimport 'slider-pro-js/css/arrows';\nimport 'slider-pro-js/css/caption';\nimport 'slider-pro-js/css/fullscreen';\nimport 'slider-pro-js/css/layers';\nimport 'slider-pro-js/css/thumbnail-arrows';\nimport 'slider-pro-js/css/thumbnail-touch-swipe';\nimport 'slider-pro-js/css/touch-swipe';\nimport 'slider-pro-js/css/video';\n```\n\n### 3. Create the HTML for the slider ###\n\n```html\n\u003cdiv class=\"slider-pro\" id=\"my-slider\"\u003e\n\t\u003cdiv class=\"sp-slides\"\u003e\n\t\t\u003c!-- Slide 1 --\u003e\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/image1.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003c!-- Slide 2 --\u003e\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cp\u003eLorem ipsum dolor sit amet\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003c!-- Slide 3 --\u003e\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003ch3 class=\"sp-layer\"\u003eLorem ipsum dolor sit amet\u003c/h3\u003e\n\t\t\t\u003cp class=\"sp-layer\"\u003econsectetur adipisicing elit\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### 4. Instantiate the slider ###\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n\tdocument.addEventListener( 'DOMContentLoaded', () =\u003e {\n\t\tconst mySlider = new SliderPro( '#my-slider', {\n\t\t\twidth: '100vw',\n\t\t\theight: '100vh',\n\t\t\tautoplay: true,\n\t\t\t...\n\t\t});\n\t});\n\u003c/script\u003e\n```\n\nIf you are importing the files as modules, you need to add each imported add-on to the `addOns` option.\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n\tdocument.addEventListener( 'DOMContentLoaded', () =\u003e {\n\t\tconst mySlider = new SliderPro( '#my-slider', {\n\t\t\taddOns: [ Autoplay, Buttons, Thumbnails ],\n\t\t\twidth: '100vw',\n\t\t\t...\n\t\t});\n\t});\n\u003c/script\u003e\n```\n\n### Custom build ###\n\nThe files from the packages's `build` folder, by default, will include all the slider's features. If you will use only a few of the provided features/add-ons and you want to optimize the files so that they include only what you use, you need to go to `entry/bundle.js` and `entry/style-bundle.js`, and comment out/remove the add-ons that you won't use. After that you need to open the terminal, navigate to the `slider-pro-js` package and run `npm run build`. \n\n## Detailed usage instructions ##\n\n* [JavaScript API](#1-core-options)\n\t* [1. Core options](#1-core-options)\n\t* [2. Add-on options](#2-add-on-options)\n\t* [3. Public Methods](#3-public-methods)\n\t* [4. Events](#4-events)\n* [Add-ons](#add-ons)\n\t* [1. Breakpoints](#1-breakpoints)\n\t* [2. Fade](#2-fade)\n\t* [3. Caption](#3-caption)\n\t* [4. Full Screen](#4-full-screen)\n\t* [5. Lazy Loading](#5-lazy-loading)\n\t* [6. Retina](#6-retina)\n\t* [7. Conditional Images](#7-conditional-images)\n\t* [8. Layers](#8-layers)\n\t* [9. Deep Linking](#9-deep-linking)\n\t* [10. Autoplay](#10-autoplay)\n\t* [11. Touch Swipe](#11-touch-swipe)\n\t* [12. Buttons](#12-buttons)\n\t* [13. Arrows](#13-arrows)\n\t* [14. Keyboard](#14-keyboard)\n\t* [15. Thumbnails](#15-thumbnails)\n\t* [16. Thumbnail Touch Swipe](#16-thumbnail-touch-swipe)\n\t* [17. Thumbnail Arrows](#17-thumbnail-arrows)\n\t* [18. Video](#18-video)\n\n### 1. Core options ###\n\nName | Default value | Description\n---|---|---\n\u003cspan id=\"width\"\u003ewidth\u003c/span\u003e | 500 | Sets the width of the slide (not the whole slider). Can be set to a fixed value, like 900 (indicating 900 pixels), or to a percentage value, like '100%' or '100vw'.\n\u003cspan id=\"height\"\u003eheight\u003c/span\u003e | 300 | Sets the height of the slide.\n\u003cspan id=\"responsive\"\u003eresponsive\u003c/span\u003e | true | Makes the slider responsive. The slider can be responsive even if the 'width' and/or 'height' properties are set to fixed values. In this situation, 'width' and 'height' will act as the maximum width and height of the slides.\n\u003cspan id=\"aspectratio\"\u003easpectRatio\u003c/span\u003e | -1 | Sets the aspect ratio of the slides. If set to a value different than -1 (e.g., 1.5, 2), the height of the slides will be overridden in order to maintain the specified aspect ratio.\n\u003cspan id=\"imagescalemode\"\u003eimageScaleMode\u003c/span\u003e | 'cover' | Sets the scale mode of the main slide images (images added as background). 'cover' will scale and crop the image so that it fills the entire slide. 'contain' will keep the entire image visible inside the slide. 'exact' will match the size of the image to the size of the slide. 'none' will leave the image to its original size.\u003cbr\u003e*Available values:* 'cover', 'contain', 'exact' and 'none'\n\u003cspan id=\"centerimage\"\u003ecenterImage\u003c/span\u003e | true | Indicates if the image will be centered\n\u003cspan id=\"allowscaleup\"\u003eallowScaleUp\u003c/span\u003e | true | Indicates if the image can be scaled up more than its original size\n\u003cspan id=\"autoheight\"\u003eautoHeight\u003c/span\u003e | false | Indicates if height of the slider will be adjusted to the height of the selected slide.\n\u003cspan id=\"autoslidesize\"\u003eautoSlideSize\u003c/span\u003e | false | Will maintain all the slides at the same height, but will allow the width of the slides to be variable if the orientation of the slides is horizontal and vice-versa if the orientation is vertical.\n\u003cspan id=\"startslide\"\u003estartSlide\u003c/span\u003e | 0 | Sets the slide that will be selected when the slider loads.\n\u003cspan id=\"shuffle\"\u003eshuffle\u003c/span\u003e | false | Indicates if the slides will be shuffled.\n\u003cspan id=\"orientation\"\u003eorientation\u003c/span\u003e | 'horizontal' | Indicates whether the slides will be arranged horizontally or vertically.\u003cbr\u003e*Available value:* 'horizontal' and 'vertical'\n\u003cspan id=\"forcesize\"\u003eforceSize | 'none' | Indicates if the size of the slider will be forced to full width or full window.\u003cbr\u003e*Available value:* 'fullWidth', 'fullWindow' and 'none'.\n\u003cspan id=\"loop\"\u003eloop\u003c/span\u003e | true | Indicates if the slider will be loopable (infinite scrolling).\n\u003cspan id=\"slidedistance\"\u003eslideDistance\u003c/span\u003e | 10 | Sets the distance between the slides.\n\u003cspan id=\"slideanimationduration\"\u003eslideAnimationDuration\u003c/span\u003e | 700 | Sets the duration of the slide animation.\n\u003cspan id=\"heightanimationduration\"\u003eheightAnimationDuration\u003c/span\u003e | 700 | Sets the duration of the height animation.\n\u003cspan id=\"visiblesize\"\u003evisibleSize\u003c/span\u003e | 'auto' | Sets the size of the visible area, allowing for more slides to become visible near the selected slide.\n\u003cspan id=\"centerselectedslide\"\u003ecenterSelectedSlide\u003c/span\u003e | true | Indicates whether the selected slide will be in the center of the slider, when there are more slides visible at a time. If set to false, the selected slide will be in the left side of the slider.\n\u003cspan id=\"righttoleft\"\u003erightToLeft\u003c/span\u003e | false | Indicates if the direction of the slider will be from right to left, instead of the default left to right.\n\n### 2. Add-on options ###\n\nName | Default value | Description\n---|---|---\n\u003cspan id=\"addons\"\u003eaddOns\u003c/span\u003e | [] | If the add-ons are imported as modules, each module needs to be added to this array.\nfade | false | Indicates if fade will be used.\nfadeOutPreviousSlide | true | Indicates if the previous slide will be faded out (in addition to the next slide being faded in).\n\u003cspan id=\"fadeduration\"\u003efadeDuration\u003c/span\u003e | 500 | Sets the duration of the fade effect.\n\u003cspan id=\"autoplay\"\u003eautoplay\u003c/span\u003e | true | Indicates whether or not autoplay will be enabled.\n\u003cspan id=\"autoplaydelay\"\u003eautoplayDelay\u003c/span\u003e | 5000 | Sets the delay/interval (in milliseconds) at which the autoplay will run.\n\u003cspan id=\"autoplaydirection\"\u003eautoplayDirection\u003c/span\u003e | 'normal' | Indicates whether autoplay will navigate to the next slide or previous slide.\u003cbr\u003e*Available values:* 'normal' and 'backwards'\n\u003cspan id=\"autoplayonhover\"\u003eautoplayOnHover\u003c/span\u003e | 'pause' | Indicates if the autoplay will be paused or stopped when the slider is hovered.\u003cbr\u003e*Available values:* 'pause', 'stop' and 'none'\n\u003cspan id=\"arrows\"\u003earrows\u003c/span\u003e | false | Indicates whether the arrow buttons will be created.\n\u003cspan id=\"fadearrows\"\u003efadeArrows\u003c/span\u003e | true | Indicates whether the arrows will fade in only on hover.\n\u003cspan id=\"buttons\"\u003ebuttons\u003c/span\u003e | true | Indicates whether the buttons will be created.\n\u003cspan id=\"keyboard\"\u003ekeyboard\u003c/span\u003e | true | Indicates whether keyboard navigation will be enabled.\n\u003cspan id=\"keyboardonlyonfocus\"\u003ekeyboardOnlyOnFocus\u003c/span\u003e | false | Indicates whether the slider will respond to keyboard input only when the slider is in focus.\n\u003cspan id=\"touchswipe\"\u003etouchSwipe\u003c/span\u003e | true | Indicates whether the touch swipe will be enabled for slides.\n\u003cspan id=\"touchswipethreshold\"\u003etouchSwipeThreshold\u003c/span\u003e | 50 | Sets the minimum amount that the slides should move.\n\u003cspan id=\"fadecaption\"\u003efadeCaption\u003c/span\u003e | true | Indicates whether or not the captions will be faded.\n\u003cspan id=\"captionfadeduration\"\u003ecaptionFadeDuration\u003c/span\u003e | 500 | Sets the duration of the fade animation.\n\u003cspan id=\"fullscreen\"\u003efullscreen\u003c/span\u003e | false | Indicates whether the full-screen button is enabled.\n\u003cspan id=\"fadefullscreen\"\u003efadeFullscreen\u003c/span\u003e | true | Indicates whether the button will fade in only on hover.\n\u003cspan id=\"waitforlayers\"\u003ewaitForLayers\u003c/span\u003e | false | Indicates whether the slider will wait for the layers to disappear before going to a new slide.\n\u003cspan id=\"autoscalelayers\"\u003eautoScaleLayers\u003c/span\u003e | true | Indicates whether the layers will be scaled automatically.\n\u003cspan id=\"autoscalereference\"\u003eautoScaleReference\u003c/span\u003e | -1 | Sets a reference width which will be compared to the current slider width in order to determine how much the layers need to scale down. By default, the reference width will be equal to the slide width. However, if the slide width is set to a percentage value, then it's necessary to set a specific value for 'autoScaleReference'.\n\u003cspan id=\"smallsize\"\u003esmallSize\u003c/span\u003e | 480 | If the slider size is below this size, the small version of the images will be used.\n\u003cspan id=\"mediumsize\"\u003emediumSize\u003c/span\u003e | 768 | If the slider size is below this size, the medium version of the images will be used.\n\u003cspan id=\"largesize\"\u003elargeSize\u003c/span\u003e | 1024 | If the slider size is below this size, the large version of the images will be used.\n\u003cspan id=\"updatehash\"\u003eupdateHash\u003c/span\u003e | false | Indicates whether the hash will be updated when a new slide is selected.\n\u003cspan id=\"reachvideoaction\"\u003ereachVideoAction\u003c/span\u003e | 'none' | Sets the action that the video will perform when its slide container is selected.\u003cbr\u003e*Available values:* 'playVideo' and 'none'\n\u003cspan id=\"leavevideoaction\"\u003eleaveVideoAction\u003c/span\u003e | 'pauseVideo' | Sets the action that the video will perform when another slide is selected.\u003cbr\u003e*Available values:* 'stopVideo', 'pauseVideo', 'removeVideo' and 'none'\n\u003cspan id=\"playvideoaction\"\u003eplayVideoAction\u003c/span\u003e | 'stopAutoplay' | Sets the action that the slider will perform when the video starts playing.\u003cbr\u003e*Available values:* 'stopAutoplay' and 'none'\n\u003cspan id=\"pausevideoaction\"\u003epauseVideoAction\u003c/span\u003e | 'none' | Sets the action that the slider will perform when the video is paused.\u003cbr\u003e*Available values:* 'startAutoplay' and 'none'\n\u003cspan id=\"endvideoaction\"\u003eendVideoAction\u003c/span\u003e | 'none' | Sets the action that the slider will perform when the video ends.\u003cbr\u003e*Available values:* 'startAutoplay', 'nextSlide', 'replayVideo' and 'none'\n\u003cspan id=\"thumbnailwidth\"\u003ethumbnailWidth\u003c/span\u003e | 100 | Sets the width of the thumbnail.\n\u003cspan id=\"thumbnailheight\"\u003ethumbnailHeight\u003c/span\u003e | 80 | Sets the height of the thumbnail.\n\u003cspan id=\"thumbnailsposition\"\u003ethumbnailsPosition\u003c/span\u003e | 'bottom' | Sets the position of the thumbnail scroller.\u003cbr\u003e*Available values:* 'top', 'bottom', 'right' and 'left'\n\u003cspan id=\"thumbnailpointer\"\u003ethumbnailPointer\u003c/span\u003e | false | Indicates if a pointer will be displayed for the selected thumbnail.\n\u003cspan id=\"thumbnailarrows\"\u003ethumbnailArrows\u003c/span\u003e | false | Indicates whether the thumbnail arrows will be enabled.\n\u003cspan id=\"fadethumbnailarrows\"\u003efadeThumbnailArrows\u003c/span\u003e | true | Indicates whether the thumbnail arrows will be faded.\n\u003cspan id=\"thumbnailtouchswipe\"\u003ethumbnailTouchSwipe\u003c/span\u003e | true | Indicates whether the touch swipe will be enabled for thumbnails.\n\u003cspan id=\"breakpoints\"\u003ebreakpoints\u003c/span\u003e | null | Sets specific breakpoints which allow changing the look and behavior of the slider when the page resizes.\n\n### 3. Public methods ###\n\nMethod signature | Description\n---|---\ngotoSlide( index ) | Scrolls to the slide at the specified index.\nnextSlide() | Scrolls to the next slide.\npreviousSlide() | Scrolls to the previous slide.\ngetSlideAt( index ) | Gets all the data of the slide at the specified index. Returns an object that contains all the data specified for that slide.\ngetSelectedSlide() | Gets the index of the selected slide.\ngetTotalSlides() | Gets the total number of slides.\nupdate() | This is called by the plugin automatically when a property is changed. You can call this manually in order to refresh the slider after changing its HTML markup (i.e., adding or removing slides).\nresize() | This is called by the plugin automatically when the slider changes its size. You can also call it manually if you find it necessary to have the slider resize itself.\naddEventListener( type, handler ) | Adds an event listener to the slider.\nremoveEventListener( type ) | Removes an event listener from the slider.\ndestroy() | Destroys a slider by removing all the visual elements and functionality added by the plugin. Basically, it leaves the slider in the state it was before the plugin was instantiated.\n\n*Example:*\n\n```javascript\n// instantiate the slider and set a few options\nconst mySlider = new SliderPro( '#my-slider', {\n\tautoSlideSize: true,\n\tloop: false\n});\n\n// the slider will go to the next slide when the document is clicked\ndocument.addEventListener( 'click', () =\u003e {\n\tmySlider.nextSlide();\n});\n```\n\n### 4. Events ###\n\nEvent type | Description\n---|---\nbeforeInit | Triggered before the slider begins its initialization.\ninit | Triggered after the slider was setup.\nbeforeUpdate | Triggered before the slider is updates.\nupdate | Triggered when the 'update' method is called, either automatically or manually.\nbeforeResize | Triggered before the slider is resized.\nresize | Triggered after the slider is resized.\ngotoSlide | Triggered when a new slide is selected.\u003cbr\u003eAvailable details:\u003cbr\u003e*index*: the index of the selected slide\u003cbr\u003e*previousIndex*: the index of the previously selected slide\ngotoSlideComplete | Triggered when the animation to the new slide is completed.\u003cbr\u003eAvailable details:\u003cbr\u003e*index*: the index of the opened slide\n\n*Example:*\n\n```javascript\n// instantiate the slider and set a few options\nconst mySlider = new SliderPro( '#my-slider', {\n\tautoSlideSize: true,\n\tloop: false\n});\n\n// the slider will go to the next slide when the document is clicked\ndocument.addEventListener( 'click', () =\u003e {\n\tmySlider.nextSlide();\n});\n\n// will show the index of the new slide in the console\nmySlider.addEventListener( 'gotoSlide', ( event ) =\u003e {\n\tconsole.log( event.detail.index );\n});\n```\n\n## Add-ons ##\n\nAdd-ons are optional blocks of code that extend the core functionality, adding more capabilities. This modular architecture makes the code more organized and also allows you to include only the features you will use, resulting in an optimized file size and performance.\n\n### 1. Breakpoints ###\n\nThe 'breakpoints' property is assigned an object which contains certain browser window widths and the slider properties that are applied to those specific widths. This is very similar to CSS media queries. However, please note that these custom properties will not be inherited between different breakpoints. The slider's properties will reset to the original values before applying a new set of properties, so if you want a certain property value to persist, you need to set it for each breakpoint.\n\n*Example:*\n```javascript\nconst mySlider = new SliderPro( '#my-slider', {\n\twidth: 960, \n\theight: 400,\n\torientation: 'horizontal',\n\tthumbnailPosition: 'right',\n\tbreakpoints: {\n\t\t800: {\n\t\t\tthumbnailsPosition: 'bottom',\n\t\t\tthumbnailWidth: 270,\n\t\t\tthumbnailHeight: 100\n\t\t},\n\t\t500: {\n\t\t\torientation: 'vertical',\n\t\t\tthumbnailsPosition: 'bottom',\n\t\t\tthumbnailWidth: 120,\n\t\t\tthumbnailHeight: 50\n\t\t}\n\t}\n});\n```\n\n---\n\n### 2. Fade ###\n\nThis add-on replaces the default slide/swipe transition with a fade transition.\n\n__Customizable properties:__ [fade](#fade), [fadeOutPreviousSlide](#fadeoutpreviousslide) and [fadeDuration](#fadeduration).\n\n---\n\n### 3. Caption ###\n\nAllows you to add captions to slides. Captions will be displayed one at a time, below the slides. The caption must be given the `sp-caption` class.\n\n*Example:*\n\n```html\n\u003cdiv class=\"sp-slide\"\u003e\n\t\u003cimg class=\"sp-image\" src=\"path/to/image.jpg\"/\u003e\n\t\u003cp class=\"sp-caption\"\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n__Customizable properties:__ [fadeCaption](#fadecaption) and [captionFadeDuration](#captionfadeduration).\n\n---\n\n### 4. Full Screen ###\n\nAllows you to view the slider in fullscreen mode, adding a button in the top-right corner of the slider.\n\n__Customizable properties:__ [fullscreen](#fullscreen) and [fadeFullscreen](#fadefullscreen).\n\n---\n\n### 5. Lazy Loading ###\n\nEnables the slider to load images (slide images and thumbnail images) only when they are in a visible area, thus saving bandwidth by not loading images that won't be viewed by the user. It also makes the initial load of the slider much faster.\n\n*Example:*\n\n```html\n\u003cdiv class=\"slider-pro\"\u003e\n\t\u003cdiv class=\"sp-slides\"\u003e\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/blank.gif\" data-src=\"path/to/image1.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003ca href=\"https://bqworks.net\"\u003e\n\t\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/blank.gif\" data-src=\"path/to/image2.jpg\"/\u003e\n\t\t\t\u003c/a\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/blank.gif\" data-src=\"path/to/image3.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv class=\"sp-thumbnails\"\u003e\n\t\t\u003cimg class=\"sp-thumbnail\" src=\"path/to/blank.gif\" data-src=\"path/to/thumbnail1.jpg\"/\u003e\n\t\t\u003cimg class=\"sp-thumbnail\" src=\"path/to/blank.gif\" data-src=\"path/to/thumbnail2.jpg\"/\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe `src` attribute of the image will point to a placeholder image, and the actual image will be specified in the `data-src` attribute. When the image becomes visible, the placeholder image will be replaced by the actual image.\n\n---\n\n### 6. Retina ###\n\nAllows you to specify an alternative image for screens with high PPI (pixels per inch), like the 'Retina' screens from Apple devices. Please note that this module will work for any screen that has high PPI, not only for the 'Retina' screens.\n\nThe high resolution image needs to be specified in the `data-retina` attribute, as seen below.\n\n*Example:*\n\n```html\n\u003cdiv class=\"slider-pro\"\u003e\n\t\u003cdiv class=\"sp-slides\"\u003e\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/blank.gif\" data-src=\"path/to/image1.jpg\" data-src=\"path/to/image1@2x.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003ca href=\"https://bqworks.net\"\u003e\n\t\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/blank.gif\" data-src=\"path/to/image2.jpg\" data-retina=\"path/to/image2@2x.jpg\"/\u003e\n\t\t\t\u003c/a\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/blank.gif\" data-src=\"path/to/image3.jpg\" data-retina=\"path/to/image3@2x.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n\t\u003cdiv class=\"sp-thumbnails\"\u003e\n\t\t\u003cimg class=\"sp-thumbnail\" src=\"path/to/blank.gif\" data-src=\"path/to/thumbnail1.jpg\" data-retina=\"path/to/thumbnail1@2x.jpg\"/\u003e\n\t\t\u003cimg class=\"sp-thumbnail\" src=\"path/to/blank.gif\" data-src=\"path/to/thumbnail2.jpg\" data-retina=\"path/to/thumbnail2@2x.jpg\"/\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nAs can be seen above, the 'Retina' module can work together with the 'Lazy Loading' module.\n\nThe slider supports the `srcset` tag, which you can use to specify higher resolution images, so you don't need to use this add-on. This was provided only for backwards compatibility with the jQuery version of the slider, so that users who want to transition from the jQuery version to the Vanilla Javascript version can keep the previous HTML markup.\n\n---\n\n### 7. Conditional Images ###\n\nThis modules allows you to specify different image sources for different screen sizes. So, instead of loading large images (suited for desktop screens) on mobile devices, there will be a set of images that will load for smaller screens.\n\nFor each image you can specify three different sources in addition to the default source.\n\n*Example:*\n\n```html\n\u003cdiv class=\"sp-slide\"\u003e\n\t\u003cimg class=\"sp-image\" src=\"path/to/blank.gif\" \n\t\tdata-src=\"path/to/image_default.jpg\"\n\t\tdata-small=\"path/to/image_small.jpg\"\n\t\tdata-medium=\"path/to/image_medium.jpg\"\n\t\tdata-large=\"path/to/image_large.jpg\"/\u003e\n\u003c/div\u003e\n```\n\nThe exact size represented by the `data-small`, `data-medium` and `data-large` attributes is given by the `smallSize`, `mediumSize` and `largeSize` properties. By default these are set to 480, 768 and 1024 pixels.\n\nSo, the image source specified in the `data-large` attribute will load when the slider's width is smaller than the value of the `largeSize` property (which is 1024, by default). The image source specified in the `data-medium` attribute will load when the slider's width is smaller than the value of the `mediumSize` property and the image source specified in the `data-small` attribute will load when the slider's width is smaller than the value of the `smallSize` property. If the slider's width is above any of these values, the default image source will be loaded.\n\nIf you want to specify separate images for Retina (high PPI) displays, you can use the `data-retinasmall`, `data-retinamedium` and `data-retinalarge` attributes (no space between `retina` and the screen size).\n\n*Example:*\n\n```html\n\u003cdiv class=\"sp-slide\"\u003e\n\t\u003cimg class=\"sp-image\" src=\"path/to/blank.gif\" \n\t\tdata-src=\"path/to/image_default.jpg\"\n\t\tdata-small=\"path/to/image_small.jpg\"\n\t\tdata-medium=\"path/to/image_medium.jpg\"\n\t\tdata-large=\"path/to/image_large.jpg\"\n\t\tdata-retinasmall=\"path/to/image_retina_small.jpg\"\n\t\tdata-retinamedium=\"path/to/image_retina_medium.jpg\"\n\t\tdata-retinalarge=\"path/to/image_retina_large.jpg\"/\u003e\n\u003c/div\u003e\n```\n\n__Customizable properties:__ [smallSize](#smallsize), [mediumSize](#mediumsize) and [largeSize](#largesize).\n\nAs with the `Retina` add-on, you don't need to include this add-on, unless you transition from the jQuery version and don't want to update the HTML markup to use the `srcset` tag.\n\n---\n\n### 8. Layers ###\n\nAdds support for layers, which are blocks of text or HTML content that can easily be positioned, sized or animated.\n\n*Example:*\n\n```html\n\u003cdiv class=\"sp-slide\"\u003e\n\t\u003cimg class=\"sp-image\" src=\"path/to/image.jpg\"/\u003e\n\n\t\u003ch3 class=\"sp-layer\"\u003e\n\t\tLorem ipsum dolor sit amet\n\t\u003c/h3\u003e\n\n\t\u003cp class=\"sp-layer\"\u003e\n\t\tconsectetur adipisicing elit\n\t\u003c/p\u003e\n\u003c/div\u003e\n```\n\nAs can be seen above, the layers need to have the `sp-layer` class, but they can be any HTML element: paragraphs, headings or just DIV elements.\n\nHere is an example that adds some styling and animation parameters:\n\n```html\n\u003cdiv class=\"sp-slide\"\u003e\n\t\u003cimg class=\"sp-image\" src=\"path/to/image.jpg\"/\u003e\n\n\t\u003ch3 class=\"sp-layer sp-black\"\n\t\tdata-position=\"bottomLeft\" data-horizontal=\"10%\"\n\t\tdata-show-transition=\"left\" data-show-delay=\"300\" data-hide-transition=\"right\"\u003e\n\t\tLorem ipsum dolor sit amet\n\t\u003c/h3\u003e\n\n\t\u003cp class=\"sp-layer sp-white sp-padding\"\n\t\tdata-width=\"200\" data-horizontal=\"center\" data-vertical=\"40%\"\n\t\tdata-show-transition=\"down\" data-hide-transition=\"up\"\u003e\n\t\tconsectetur adipisicing elit\n\t\u003c/p\u003e\n\n\t\u003cdiv class=\"sp-layer sp-static\"\u003eStatic content\u003c/div\u003e\n\u003c/div\u003e\n```\n\nThere are several predefined classes that can be passed to layers in order to style them. The position, size and animations are set using data attributes.\n\n#### Predefined classes: ####\n\n`sp-static`\n\n\u003eSets the layer to be visible all the time, not animated.\n\n`sp-black`\n\n\u003eAdds a black and transparent background and makes the font color white.\n\n`sp-white`\n\n\u003eAdds a white and transparent background and makes the font color black.\n\n`sp-padding`\n\n\u003eAdds a 10 pixel padding to the layer.\n\n`sp-rounded`\n\n\u003eMakes the layer's corners rounded.\n\n#### Data attributes: ####\n\n`data-width`\n\n\u003eSets the width of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's width will adapt to the width of the inner content.\n\n`data-height`\n\n\u003eSets the height of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's height will adapt to the height of the inner content.\n\n`data-depth`\n\n\u003eSets the depth (z-index, in CSS terms) of the layer.\n\n`data-position`\n\n\u003eSets the position of the layer. Can be set to 'topLeft' (which is the default value), 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight', 'centerLeft', 'centerRight' and 'centerCenter'.\n\n`data-horizontal`\n\n\u003eSets the horizontal position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed or percentage value.\n\n`data-vertical`\n\n\u003eSets the vertical position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed or percentage value.\n\n`data-show-transition`\n\n\u003eSets the transition of the layer when it appears in the slide. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it appears.\n\n`data-show-offset`\n\n\u003eSets an offset for the position of the layer from which the layer will be animated towards the final position when it appears in the slide. Needs to be set to a fixed value.\n\n`data-show-duration`\n\n\u003eSets the duration of the show transition.\n\n`data-show-delay`\n\n\u003eSets a delay for the show transition. This delay starts from the moment when the transition to the new slide starts.\n\n`data-hide-transition`\n\n\u003eSets the transition of the layer when it disappears from the slide. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it disappears.\n\n`data-hide-offset`\n\n\u003eSets an offset for the position of the layer towards which the layer will be animated from the original position when it disappears from the slide. Needs to be set to a fixed value.\n\n`data-hide-duration`\n\n\u003eSets the duration of the hide transition.\n\n`data-hide-delay`\n\n\u003eSets a delay for the hide transition.\n\n`data-stay-duration`\n\n\u003eSets how much time a layer will stay visible before being hidden automatically.\n\n\u003eThe layers are animated using CSS3 transitions in most browsers. In IE9 and IE8 (where CSS3 transitions are not supported), the layers will only fade in/out, and in IE7 and older, the layers will appear without any animation.\n\n__Customizable properties:__ [waitForLayers](#waitforlayers), [autoScaleLayers](#autoscalelayers) and [autoScaleReference](#autoscalereference).\n\n---\n\n### 9. Deep Linking ###\n\nProvides the possibility to link to a specific slide in the slider. You can use this to have the slider opened at a specific slide when the page loads or to navigate to a specific slide at a later time.\n\nThe hash that needs to be appended to the URL consists of the 'id' attribute of the slider and the index of the slide separated by a slash character (/). For example, `https://domain.com/page#my-slider/0` will open the first slide (because slide indexes start with 0) in the slider that has the 'id' set to 'my-slider'.\n\nIt's also possible to specify the 'id' attribute of the slide instead of its index.\n\n*Example:*\n\n```html\n\u003cdiv id=\"my-slider\" class=\"slider-pro\"\u003e\n\t\u003cdiv class=\"sp-slides\"\u003e\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/image1.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cdiv id=\"my-slide\" class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/image2.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/image3.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nIn order to open the second slide, you can use either `https://domain.com/page#my-slider/1` or `https://domain.com/page#my-slider/my-slide`.\n\n__Customizable properties:__ [updateHash](#updatehash).\n\n---\n\n### 10. Autoplay ###\n\nAdds autoplay functionality.\n\n__Customizable properties:__ [autoplay](#autoplay), [autoplayDelay](#autoplaydelay), [autoplayDirection](#autoplaydirection) and [autoplayOnHover](#autoplayonhover).\n\n---\n\n### 11. Touch Swipe ###\n\nAdds touch-swipe functionality for the slides. The module also adds mouse drag functionality on non-touch screen devices.\n\n__Customizable properties:__ [touchSwipe](#touchswipe) and [touchSwipeThreshold](#touchswipethreshold).\n\n---\n\n### 12. Buttons ###\n\nAdds navigation buttons below the slider.\n\n__Customizable properties:__ [buttons](#buttons).\n\n---\n\n### 13. Arrows ###\n\nAdds navigation arrows for the slides.\n\n__Customizable properties:__ [arrows](#arrows) and [fadeArrows](#fadearrows).\n\n---\n\n### 14. Keyboard ###\n\nAdds keyboard navigation support. The arrow keys will move the slider to the next or previous slide, and the Enter key will open the link attached to the slide's main image.\n\n__Customizable properties:__ [keyboard](#keyboard) and [keyboardOnlyOnFocus](#keyboardonlyonfocus).\n\n---\n\n### 15. Thumbnails ###\n\nThis module adds support for thumbnails. Thumbnails can contain any HTML content, from simple images to more complex structures that include both text and images.\n\nThere are two possible variations for adding thumbnails:\n\n- Add them separately from slides, in their own container, `sp-thumbnails`.\n\n*Example:*\n\n```html\n\u003cdiv class=\"slider-pro\"\u003e\n\t\u003cdiv class=\"sp-slides\"\u003e\n\t\t...\n\t\u003c/div\u003e\n\n\t\u003cdiv class=\"sp-thumbnails\"\u003e\n\t\t\u003cimg class=\"sp-thumbnail\" src=\"path/to/thumbnail.jpg\"/\u003e\n\n\t\t\u003cp class=\"sp-thumbnail\"\u003eThumbnail 2\u003c/p\u003e\n\n\t\t\u003cdiv class=\"sp-thumbnail\"\u003e\n\t\t\t\u003cimg class=\"sp-thumbnail-image\" src=\"path/to/thumbnail.jpg\"/\u003e\n\t\t\t\u003cp class=\"sp-thumbnail-text\"\u003eTempor incididunt ut labore et dolore magna\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n- Add each thumbnail in the `sp-slide` element to which it corresponds.\n\n*Example:*\n\n```html\n\u003cdiv class=\"slider-pro\"\u003e\n\t\u003cdiv class=\"sp-slides\"\u003e\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/image1.jpg\"/\u003e\n\n\t\t\t\u003cimg class=\"sp-thumbnail\" src=\"path/to/thumbnail.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cdiv id=\"my-slide\" class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/image2.jpg\"/\u003e\n\n\t\t\t\u003cp class=\"sp-thumbnail\"\u003eThumbnail 2\u003c/p\u003e\n\t\t\u003c/div\u003e\n\n\t\t\u003cdiv class=\"sp-slide\"\u003e\n\t\t\t\u003cimg class=\"sp-image\" src=\"path/to/image3.jpg\"/\u003e\n\n\t\t\t\u003cdiv class=\"sp-thumbnail\"\u003e\n\t\t\t\t\u003cimg class=\"sp-thumbnail-image\" src=\"path/to/thumbnail.jpg\"/\u003e\n\t\t\t\t\u003cp class=\"sp-thumbnail-text\"\u003eTempor incididunt ut labore et dolore magna\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can use which variations you think is more semantic for your implementation.\n\n__Customizable properties:__ [thumbnailWidth](#thumbnailwidth), [thumbnailHeight](#thumbnailheight), [thumbnailsPosition](#thumbnailsposition) and [thumbnailPointer](#thumbnailpointer).\n\n---\n\n### 16. Thumbnail Touch Swipe ###\n\nAdds touch swipe functionality for the thumbnails.\n\n__Customizable properties:__ [thumbnailTouchSwipe](#thumbnailtouchswipe). \n\n---\n\n### 17. Thumbnail Arrows ###\n\nAdds navigation arrows for the thumbnails.\n\n__Customizable properties:__ [thumbnailArrows](#thumbnailarrows) and [fadeThumbnailArrows](#fadethumbnailarrows).\n\n---\n\n### 18. Video ###\n\nProvides automatic control of the videos loaded inside the slider. For example, the video will pause automatically when another slide is selected or, if the autoplay is running, it will be paused when a video starts playing.\n\nThe video types or providers supported by this module are: YouTube, Vimeo, HTML5 and Video.js.\n\nIn order to have a video automatically controlled by the slider, the video must have the `sp-video` class. Also, there are some provider-specific requirements for the videos, as presented below.\n\n__Customizable properties:__ [reachVideoAction](#reachvideoaction), [leaveVideoAction](#leavevideoaction), [playVideoAction](#playvideoaction), [pauseVideoAction](#pausevideoaction) and [endVideoAction](#endvideoaction).\n\n##### YouTube #####\n\nYouTube videos can be loaded in two ways: by using a poster image with a link to the YouTube video or by inserting directly the video iframe provided by YouTube.\n\n*Example 1:*\n\n```html\n\u003ca class=\"sp-video\" href=\"//www.youtube.com/watch?v=oaDkph9yQBs\"\u003e\n    \u003cimg src=\"path/to/poster.jpg\" width=\"500\" height=\"300\"/\u003e\n\u003c/a\u003e\n```\n\nWhen using the second method, the videos will need to have the `enablejsapi=1` parameter appended to the URL of the video. It's also recommended to append the `wmode=opaque` parameter. The parameters need to be delimited by `\u0026amp;`.\n\n*Example 2:*\n\n```html\n\u003ciframe class=\"sp-video\" src=\"https://www.youtube.com/embed/msIjWthwWwI?enablejsapi=1\u0026amp;wmode=opaque\" width=\"500\" height=\"350\" frameborder=\"0\" allowfullscreen\u003e\u003c/iframe\u003e\n```\n\n##### Vimeo #####\n\nJust like YouTube videos, Vimeo videos can also be loaded by using a poster image or by inserting directly the video iframe.\n\n*Example 1:*\n\n```html\n\u003ca class=\"sp-video\" href=\"https://vimeo.com/109354891\"\u003e\n    \u003cimg src=\"path/to/poster.jpg\" width=\"500\" height=\"300\"/\u003e\n\u003c/a\u003e\n```\n\nWhen using the second method, the videos will need to have the `api=1` parameter appended to the URL of the video.\n\n*Example 2:*\n\n```html\n\u003ciframe class=\"sp-video\" src=\"https://player.vimeo.com/video/109354891?api=1\" width=\"500\" height=\"300\" frameborder=\"0\" allowfullscreen\u003e\u003c/iframe\u003e\n```\n\n##### HTML5 #####\n\nSimple HTML5 videos don't need any preparations other than having the `sp-video` class.\n\n*Example:*\n\n```html\n\u003cvideo class=\"sp-video\" poster=\"path/to/poster.jpg\" width=\"500\" height=\"350\" controls=\"controls\" preload=\"none\"\u003e\n\t\u003csource src=\"path/to/video.mp4\" type=\"video/mp4\"/\u003e\n\t\u003csource src=\"path/to/video.ogv\" type=\"video/ogg\"/\u003e\n\u003c/video\u003e\n```\n\n##### Video.js #####\n\nVideos using Video.js also need the `sp-video` class, in addition to the other video.js specific requirements, like adding the `video-js` class or the `data-setup={}` attribute.\n\n*Example:*\n\n```html\n\u003cvideo class=\"sp-video video-js\" poster=\"path/to/poster.jpg\" width=\"500\" height=\"350\" controls=\"controls\" preload=\"none\" data-setup=\"{}\"\u003e\n\t\u003csource src=\"path/to/video.mp4\" type=\"video/mp4\"/\u003e\n\t\u003csource src=\"path/to/video.ogv\" type=\"video/ogg\"/\u003e\n\u003c/video\u003e\n```\n\n## Support ##\n\nIf you found a bug or have a feature suggestion, please submit it in the [Issues tracker](https://github.com/bqworks/slider-pro/issues).\n\nIf you need extensive help with implementing the slider in your project, you can contact me.\n\n## License ##\n\nThe plugin is available under the \u003ca href=\"https://opensource.org/licenses/MIT\"\u003eMIT license\u003c/a\u003e.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbqworks%2Fslider-pro-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbqworks%2Fslider-pro-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbqworks%2Fslider-pro-js/lists"}