{"id":15132905,"url":"https://github.com/codeinwp/ideal-image-slider-js","last_synced_at":"2025-12-12T04:10:08.648Z","repository":{"id":20161375,"uuid":"23431996","full_name":"Codeinwp/Ideal-Image-Slider-JS","owner":"Codeinwp","description":"Quite simply the ideal Image Slider in vanilla JS.","archived":true,"fork":false,"pushed_at":"2021-04-27T12:57:17.000Z","size":6569,"stargazers_count":1563,"open_issues_count":36,"forks_count":158,"subscribers_count":69,"default_branch":"master","last_synced_at":"2025-08-26T02:52:36.392Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://idealimageslider.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Codeinwp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2014-08-28T14:57:33.000Z","updated_at":"2025-07-23T21:22:23.000Z","dependencies_parsed_at":"2022-09-02T18:51:30.398Z","dependency_job_id":null,"html_url":"https://github.com/Codeinwp/Ideal-Image-Slider-JS","commit_stats":null,"previous_names":["gilbitron/ideal-image-slider"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/Codeinwp/Ideal-Image-Slider-JS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codeinwp%2FIdeal-Image-Slider-JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codeinwp%2FIdeal-Image-Slider-JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codeinwp%2FIdeal-Image-Slider-JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codeinwp%2FIdeal-Image-Slider-JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codeinwp","download_url":"https://codeload.github.com/Codeinwp/Ideal-Image-Slider-JS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codeinwp%2FIdeal-Image-Slider-JS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277456534,"owners_count":25820980,"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","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-09-26T04:41:30.563Z","updated_at":"2025-09-29T02:32:02.717Z","avatar_url":"https://github.com/Codeinwp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ideal Image Slider\n\nThe aim behind the Ideal Image Slider is to create a slider which has just the right amount of features,\nwith no bloat and be easy to extend so that more features can be added as \"extensions\". Here are the ideals\nand core features I wanted to include:\n\n* HTML5 (SEO optimised)\n* CSS3 transitions (a few simple transitions like slide/fade)\n* Left/Right navigation (including touch/swipe support)\n* Responsive\n* HiDPI (retina) support\n* ARIA support\n* Extremely simple to setup (no dependencies)\n* Very extensible\n* Uses progressive enhancement\n* Open source (goes without saying)\n\nAnd, as an example, here are some features that *should not* be in the core and could be optional extensions:\n\n* Themes or skins\n* More transitions\n* Bullet navigation\n* Thumbnail navigation\n* Full screen slider\n* Video/Audio support\n* etc...\n\n[Read the original blog post \u0026rarr;](http://gilbert.pellegrom.me/the-ideal-image-slider)\n\n## Demos\n\n* [Standard Slider](http://idealimageslider.com/demo/standard-slider.html)\n* [With Links](http://idealimageslider.com/demo/links.html)\n* [Using the API](http://idealimageslider.com/demo/using-the-api.html)\n* [Using Events](http://idealimageslider.com/demo/using-events.html)\n* [Multiple Sliders](http://idealimageslider.com/demo/multiple-sliders.html)\n\n## Extensions\n\n* [Bullet Navigation](https://github.com/gilbitron/Ideal-Image-Slider/tree/master/extensions/bullet-nav)\n* [Captions](https://github.com/gilbitron/Ideal-Image-Slider/tree/master/extensions/captions)\n* [Third Party Extensions](https://github.com/gilbitron/Ideal-Image-Slider/wiki/Third-Party-Extensions)\n\n## Requirements\n\n* **None**\n\nIdeal Image Slider is written in vanilla JS and has no dependancies.\n\n## Getting Started\n\nTo install the slider you can either manually download this repository or you can use [Bower](http://bower.io)\nand run the following command:\n\n```\nbower install ideal-image-slider --save\n```\n\nNext you need to include the CSS file in the `\u003chead\u003e` section of your HTML and you need to include the script\nbefore the `\u003c/body\u003e` tag in your HTML. Note you can optionally include a theme CSS file in the `\u003chead\u003e` too.\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n\t...\n\t\u003clink rel=\"stylesheet\" href=\"/path/to/ideal-image-slider.css\"\u003e\n\t\u003clink rel=\"stylesheet\" href=\"/path/to/themes/default/default.css\"\u003e\n\t...\n\u003c/head\u003e\n\u003cbody\u003e\n\t...\n\t\u003cscript src=\"/path/to/ideal-image-slider.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nNext you need to set up your slider HTML where you want it to appear in your page. It should look something\nlike this:\n\n```html\n\u003cdiv id=\"slider\"\u003e\n\t\u003cimg src=\"img/1.jpg\" alt=\"Minimum required attributes\"\u003e\n\t\u003cimg data-src=\"img/2.jpg\" src=\"\" alt=\"Use data-src for on-demand loading\"\u003e\n\t\u003cimg data-src=\"img/3.jpg\" data-src-2x=\"img/3@2x.jpg\" src=\"\" alt=\"Use data-src-2x for HiDPI devices\"\u003e\n\t\u003ca href=\"http://example.com\"\u003e\u003cimg data-src=\"img/4.jpg\" src=\"\" alt=\"Links work too\"\u003e\u003c/a\u003e\n\t...\n\u003c/div\u003e\n```\n\nThere a few things to note about the structure of the images in your slider:\n\n* This is an image slider, so only images are supported. Any other content will be removed.\n* You can use the `data-src` attribute to load your images \"on-demand\" (i.e. images are not loaded until they are required).\n* The first image should not use `data-src` so it is loaded if no JS is detected.\n* If you specify a `data-src-2x` image, it will be used on devices that support HiDPI (such as Apple's retina devices).\n\nFinally you can create your slider by using the following Javascript:\n\n```js\nnew IdealImageSlider.Slider('#slider');\n```\n\nIf you want to tweak the settings or use the slider API it would look more like:\n\n```js\nvar slider = new IdealImageSlider.Slider({\n\tselector: '#slider',\n\theight: 400, // Required but can be set by CSS\n\tinterval: 4000\n});\nslider.start();\n```\n\nNote: If you don't pass a `height` to the Javascript constructor you **must** set it\nin your CSS.\n\n## Settings\n\n|Setting|Default Value|Description|\n|---|---|---|\n|selector|`''`|CSS selector for the slider|\n|height|`'auto'`|Height of the slider. Can be `'auto'` (height changes depending on the height of the slide), a fixed px value (e.g. `400`) or an aspect ratio (e.g. `'16:9'`)|\n|initialHeight|`400`|If height is `'auto'` or an aspect ratio this is the height of the slider while the first image is loading|\n|maxHeight|`null`|If height is `'auto'` or an aspect ratio this is an optional max height in px for the slider (e.g. `800`)|\n|interval|`4000`|Time (in ms) to wait before changing to the next slide|\n|transitionDuration|`700`|Duration (in ms) of animated transition|\n|effect|`'slide'`|Transition effect (slide/fade by default)|\n|disableNav|`false`|Toggle the previous/next navigation (also disables touch and keyboard navigation)|\n|keyboardNav|`true`|Toggle keyboard navigation|\n|previousNavSelector|`''`|Selector for custom previous nav element|\n|nextNavSelector|`''`|Selector for custom next nav element|\n|classes|`{...}`|List of classes to be used by slider. Probably shouldn't be changed|\n\n## Events\n\nEvent callback functions can be passed in with the settings. For example:\n\n```js\nnew IdealImageSlider.Slider({\n\tselector: '#slider',\n\tonStart: function(){\n\t\tconsole.log('onStart');\n\t}\n});\n```\n\n|Event|Description|\n|---|---|\n|onInit|Callback that fires when slider and first image have loaded|\n|onStart|Callback that fires when slider has started playing|\n|onStop|Callback that fires when slider has stopped playing|\n|onDestroy|Callback that fires when slider is destroyed|\n|beforeChange|Callback that fires before a slide has changed|\n|afterChange|Callback that fires after a slide has changed|\n\n## API\n\nTo use the API methods you must store the slider object. For example:\n\n```js\nvar slider = new IdealImageSlider.Slider('#slider');\nslider.start();\n```\n\n|Method|Description|\n|---|---|\n|start()|Start the slider. Note the slider will automatically be stopped when navigation is used|\n|stop()|Stop the slider|\n|previousSlide()|Change to the previous slide|\n|nextSlide()|Change to the next slide|\n|gotoSlide(index)|Change to a specific slide (1 indexed)|\n|destroy()|Destroy the slider|\n|get(attribute)|Get an attribute value (attributes are mostly used internally)|\n|set(attribute, value)|Set an attribute. Can be useful for storing custom data|\n\n## Browsers\n\nIdeal Image Slider has been tested on:\n\n* Chrome\n* Firefox\n* Safari (Desktop + Mobile)\n* Opera\n* IE9+\n\n## Contribute\n\nSo you want to help out? That's awesome. Here is how you can do it:\n\n* [Report a bug](https://github.com/gilbitron/Ideal-Image-Slider/labels/bug)\n* [Ask for a feature](https://github.com/gilbitron/Ideal-Image-Slider/labels/enhancement)\n* [Submit a pull request](https://github.com/gilbitron/Ideal-Image-Slider/pulls)\n\nIf you are submitting a pull request please adhere to the existing coding standards used throughout the code\nand only submit **1 feature/fix per pull request**. Pull requests containing multiple changes will be rejected.\n\nNote that if you submit a pull request you are aware that you are contributing to both the free (open source) version\nand the proprietary (commercial) version of the codebase and that your work may make money for Dev7studios.\n\n## Credits\n\nIdeal Image Slider was created by [Gilbert Pellegrom](http://gilbert.pellegrom.me) from\n[Dev7studios](http://dev7studios.com). Released under the [GPL license](https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE).\n\n## Other Projects\n\nCheck-out other stuff that we are working on : \n\n* [ThemeIsle](https://themeisle.com)\n* [Codeinwp](https://codeinwp.com/blog/)\n* [Revive.social](https://revive.social)\n* [FinMasters](https://finmasters.com)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeinwp%2Fideal-image-slider-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeinwp%2Fideal-image-slider-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeinwp%2Fideal-image-slider-js/lists"}