{"id":13516809,"url":"https://github.com/bqworks/slider-pro","last_synced_at":"2025-05-15T04:06:54.347Z","repository":{"id":22587083,"uuid":"25928758","full_name":"bqworks/slider-pro","owner":"bqworks","description":"A modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.","archived":false,"fork":false,"pushed_at":"2024-02-24T09:17:57.000Z","size":709,"stargazers_count":875,"open_issues_count":39,"forks_count":387,"subscribers_count":58,"default_branch":"master","last_synced_at":"2025-04-14T04:59:36.916Z","etag":null,"topics":["carousel","jquery-slider-plugin","layers","responsive-slider","slider","touch-slider"],"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}},"created_at":"2014-10-29T15:57:52.000Z","updated_at":"2025-04-08T22:17:18.000Z","dependencies_parsed_at":"2024-03-29T06:33:13.956Z","dependency_job_id":"8a9f62bd-741b-45a0-a612-ca9474437f01","html_url":"https://github.com/bqworks/slider-pro","commit_stats":{"total_commits":167,"total_committers":7,"mean_commits":"23.857142857142858","dds":"0.13772455089820357","last_synced_commit":"d1224b7824d7b94a2f713b9a994e9b73a9bf00d4"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bqworks%2Fslider-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bqworks%2Fslider-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bqworks%2Fslider-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bqworks%2Fslider-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bqworks","download_url":"https://codeload.github.com/bqworks/slider-pro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254069722,"owners_count":22009558,"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","jquery-slider-plugin","layers","responsive-slider","slider","touch-slider"],"created_at":"2024-08-01T05:01:26.125Z","updated_at":"2025-05-15T04:06:49.330Z","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)](https://www.npmjs.com/package/slider-pro)\n[![License](https://img.shields.io/github/license/bqworks/slider-pro)](https://github.com/bqworks/slider-pro/blob/master/LICENSE)\n[![Build](https://github.com/bqworks/slider-pro/actions/workflows/build.yml/badge.svg)](https://github.com/bqworks/slider-pro/actions/workflows/build.yml)\n[![Downloads](https://img.shields.io/npm/dt/slider-pro)](https://github.com/bqworks/slider-pro)\n\n# [Slider Pro - jQuery slider plugin](https://bqworks.net/slider-pro/) #\n\nA modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.\n\n\u003eThe slider is also available in [Vanilla JavaScript](https://github.com/bqworks/slider-pro-js) and as a [WordPress plugin](https://wordpress.org/plugins/sliderpro/).\n\nMain features: \n\n* modular architecture\n* responsive\n* touch-swipe\n* CSS3 transitions\n* animated layers (and static)\n* infinite scrolling\n* carousel layout\n* different sized images\n* full width and full window support\n* thumbnails\n* deep linking\n* lazy loading\n* retina-enabled\n* fade effect\n* full-screen support\n* CSS-only navigation controls (no graphics) for easy customization\n* video support\n* conditional images (different images for different screen sizes)\n* JavaScript breakpoints \n\nCheck the plugin's [presentation page](https://bqworks.net/slider-pro/) for examples and more details of the available features.\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` or `bower`.\n\n```\n$ npm install slider-pro\n```\n\n```\n$ bower install slider-pro\n```\n\n### 2. Load the required files ###\n\nInside the page's head tag include the slider's CSS file.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/css/slider-pro.min.css\"/\u003e\n```\n\nIn the page's footer, just before \u003ccode\u003e\u0026lt;/body\u0026gt;\u003c/code\u003e, include the required JavaScript files.\n\n```html\n\u003cscript src=\"https://code.jquery.com/jquery-3.6.2.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/js/jquery.sliderPro.min.js\"\u003e\u003c/script\u003e\n```\n\nFrom unpkg.com:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/slider-pro/dist/css/slider-pro.min.css\"/\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/slider-pro/dist/js/jquery.sliderPro.min.js\"\u003e\u003c/script\u003e\n```\n\n### 3. Create the HTML markup ###\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\nThe structure you see in the code above (slider-pro \u003e sp-slides \u003e sp-slide) as well as the class names used are required.\n\nIf you add an image to the slide and you want it to behave like a background image you need to add the `sp-image` class to it.\n\nMore about the supported content (i.e., layers, html, video) in the [Modules](docs/modules.md#modules) doc.\n\n### 4. Instantiate the slider ###\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n\tjQuery( document ).ready(function( $ ) {\n\t\t$( '#my-slider' ).sliderPro();\n\t});\n\u003c/script\u003e\n```\n\nSlider Pro has 50+ options which you can pass to the slider when you instantiate it. More about this in the [JavaScript API](docs/api.md#javascript-api) doc.\n\n## Detailed usage instructions ##\n\n* [JavaScript API](docs/api.md#javascript-api)\n\t* [1. Properties](docs/api.md#1-properties)\n\t* [2. Public Methods](docs/api.md#2-public-methods)\n\t* [3. Callbacks](docs/api.md#3-callbacks)\n* [Modules](docs/modules.md#modules)\n\t* [1. Fade](docs/modules.md#1-fade)\n\t* [2. Caption](docs/modules.md#2-caption)\n\t* [3. Full Screen](docs/modules.md#3-full-screen)\n\t* [4. Lazy Loading](docs/modules.md#4-lazy-loading)\n\t* [5. Retina](docs/modules.md#5-retina)\n\t* [6. Conditional Images](docs/modules.md#6-conditional-images)\n\t* [7. Layers](docs/modules.md#7-layers)\n\t* [8. Deep Linking](docs/modules.md#8-deep-linking)\n\t* [9. Autoplay](docs/modules.md#9-autoplay)\n\t* [10. Touch Swipe](docs/modules.md#10-touch-swipe)\n\t* [11. Buttons](docs/modules.md#11-buttons)\n\t* [12. Arrows](docs/modules.md#12-arrows)\n\t* [13. Keyboard](docs/modules.md#13-keyboard)\n\t* [14. Thumbnails](docs/modules.md#14-thumbnails)\n\t* [15. Thumbnail Touch Swipe](docs/modules.md#15-thumbnail-touch-swipe)\n\t* [16. Thumbnail Arrows](docs/modules.md#16-thumbnail-arrows)\n\t* [17. Video](docs/modules.md#17-video)\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 help with implementing the slider in your project, I recommend using [Stack Overflow](https://stackoverflow.com/questions/tagged/slider-pro) instead of the Issues tracker.\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","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbqworks%2Fslider-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbqworks%2Fslider-pro/lists"}