{"id":17312708,"url":"https://github.com/matthiasmullie/jquery-simple-slideshow","last_synced_at":"2025-04-14T14:33:33.509Z","repository":{"id":57282430,"uuid":"10719205","full_name":"matthiasmullie/jquery-simple-slideshow","owner":"matthiasmullie","description":"A simple, low-config, jQuery-based slideshow.","archived":false,"fork":false,"pushed_at":"2016-01-25T17:09:00.000Z","size":22,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-11T17:35:56.974Z","etag":null,"topics":[],"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/matthiasmullie.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}},"created_at":"2013-06-16T11:36:17.000Z","updated_at":"2018-01-02T07:25:42.000Z","dependencies_parsed_at":"2022-08-31T00:00:14.376Z","dependency_job_id":null,"html_url":"https://github.com/matthiasmullie/jquery-simple-slideshow","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/matthiasmullie%2Fjquery-simple-slideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthiasmullie%2Fjquery-simple-slideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthiasmullie%2Fjquery-simple-slideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthiasmullie%2Fjquery-simple-slideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matthiasmullie","download_url":"https://codeload.github.com/matthiasmullie/jquery-simple-slideshow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248603834,"owners_count":21131870,"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":[],"created_at":"2024-10-15T12:44:23.242Z","updated_at":"2025-04-14T14:33:33.479Z","avatar_url":"https://github.com/matthiasmullie.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-simple-slideshow\n\n[![Latest version](https://img.shields.io/npm/dt/jquery-simple-slideshow.svg)](https://www.npmjs.com/package/jquery-simple-slideshow)\n[![Downloads total](https://img.shields.io/npm/v/jquery-simple-slideshow.svg)](https://www.npmjs.com/package/jquery-simple-slideshow)\n[![License](https://img.shields.io/npm/l/jquery-simple-slideshow.svg)](https://github.com/matthiasmullie/jquery-simple-slideshow/blob/master/LICENSE)\n\nThis is a simple jQuery-based slideshow. It will not require a pre-defined complex HTML structure.\nAll that is needed is for 1 original \u003cimg\u003e to be added to the HTML. 2 Clones will be created at exactly the place of the original image, and will start iterating the images according to the desired config.\n\n\n## Usage\n\n### Example 1\n\n* 10 second display time\n* 1 second fade time\n* previous \u0026 next buttons\n* 3 images, all clickable to 3 links\n* random images\n\nLooks like:\n\n```html\n\u003cimg id=\"slideshow\" src=\"path/to/initial/file.jpg\" /\u003e\n\u003ca href=\"#\" id=\"prev\"\u003ePrevious\u003c/a\u003e\n\u003ca href=\"#\" id=\"next\"\u003eNext\u003c/a\u003e\n\n\u003cscript src=\"jquery.min.js\" /\u003e \u003c!-- path to jQuery --\u003e\n\u003cscript src=\"jquery.simple.slideshow.js\" /\u003e \u003c!-- path to slideshow script --\u003e\n\u003cscript\u003e\n\t$('#slideshow').simpleSlideshow({\n\t\tfadeTime: 10000,\n\t\tfadeSpeed: 1000,\n\t\tbindPrevious: $('#prev'), // bind button to previous image\n\t\tbindNext: $('#next'), // bind button to next image\n\t\timages: [\n\t\t\t'path/to/initial/file.jpg',\n\t\t\t'path/to/second/file.jpg',\n\t\t\t'path/to/another/file.jpg',\n\t\t],\n\t\tlinks: [\n\t\t\t'http://www.mullie.eu',\n\t\t\t'http://www.twitter.com/matthiasmullie',\n\t\t\t'http://www.linkedin.com/in/matthiasmullie',\n\t\t],\n\t\trandom: true\n\t});\n\u003c/script\u003e\n```\n\n### Example 2\n\n* Image-specific controls\n* Image paths tossed in as data-attribute\n\nLooks like:\n\n```html\n\u003cimg id=\"slideshow\" src=\"path/to/initial/file.jpg\" data-images=\"path/to/initial/file.jpg,path/to/second/file.jpg,path/to/another/file.jpg\" /\u003e\n\u003ca href=\"#\" class=\"controls\"\u003e1\u003c/a\u003e\n\u003ca href=\"#\" class=\"controls\"\u003e2\u003c/a\u003e\n\u003ca href=\"#\" class=\"controls\"\u003e3\u003c/a\u003e\n\n\u003cscript src=\"jquery.min.js\" /\u003e \u003c!-- path to jQuery --\u003e\n\u003cscript src=\"jquery.simple.slideshow.js\" /\u003e \u003c!-- path to slideshow script --\u003e\n\u003cscript\u003e\n\t$('#slideshow').simpleSlideshow({\n\t\tbindSpecific: $('.controls'), // bind image-specific buttons\n\t});\n\u003c/script\u003e\n```\n\n\n## Options\n\nOptions can be passed in as a `{ key: value }` object literal. Available options are:\n\n| property     | default value | description                                                                                                                                                        |\n|--------------|:-------------:|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| fadeTime     | 5000          | The duration for which an image will be displayed, in milliseconds                                                                                                 |\n| fadeSpeed    | 'normal'      | The animation time during which the image will fade out, in milliseconds                                                                                           |\n| bindPrevious |               | jQuery element(s) that, when clicked, should display the previous image                                                                                            |\n| bindNext     |               | jQuery element(s) that, when clicked, should display the next image                                                                                                |\n| bindSpecific |               | jQuery element(s) that, when clicked, should display a specific image. First element will be bound to first image, second element to second image, ...             |\n| images       |               | Array of paths for image to be displayed. Paths can also be defined via the slideshow element's data-images attribute                                              |\n| links        |               | Optional array of links to make images clickable, tied by index to the array of images. Paths can also be defined via the slideshow element's data-links attribute |\n| random       | false         | Randomize the images' display order                                                                                                                                |\n\n\n## Installation\n\nInstall this package via [npm](https://www.npmjs.org/):\n\n```sh\nnpm install jquery-simple-slideshow\n```\n\nOr simply copy jquery.simple.slideshow.js into your project.\n\n\n## License\njquery-simple-slideshow is [MIT](http://opensource.org/licenses/MIT) licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthiasmullie%2Fjquery-simple-slideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatthiasmullie%2Fjquery-simple-slideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthiasmullie%2Fjquery-simple-slideshow/lists"}