{"id":26513836,"url":"https://github.com/piobeat/offbeatslider","last_synced_at":"2026-04-14T14:32:35.248Z","repository":{"id":98144491,"uuid":"86243580","full_name":"PioBeat/offbeatSlider","owner":"PioBeat","description":"jQuery Image Slideshow Plugin with Animation","archived":false,"fork":false,"pushed_at":"2017-10-22T17:37:13.000Z","size":2274,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-29T12:37:22.715Z","etag":null,"topics":["animation","image-slider","image-slideshow","jquery-plugin","slide-images"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PioBeat.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-26T15:33:57.000Z","updated_at":"2017-10-22T17:09:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"a57fb49e-a0bc-49b0-9a0e-31306d8d0064","html_url":"https://github.com/PioBeat/offbeatSlider","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/PioBeat/offbeatSlider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PioBeat%2FoffbeatSlider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PioBeat%2FoffbeatSlider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PioBeat%2FoffbeatSlider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PioBeat%2FoffbeatSlider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PioBeat","download_url":"https://codeload.github.com/PioBeat/offbeatSlider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PioBeat%2FoffbeatSlider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31801338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T11:13:53.975Z","status":"ssl_error","status_checked_at":"2026-04-14T11:13:53.299Z","response_time":153,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["animation","image-slider","image-slideshow","jquery-plugin","slide-images"],"created_at":"2025-03-21T04:45:53.218Z","updated_at":"2026-04-14T14:32:35.237Z","avatar_url":"https://github.com/PioBeat.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# offbeatSlider - a jQuery Slideshow Plugin\n\nEasy to use jQuery plugin to create an image slideshow for a thumbnail preview or\nfor page headers.\n\n**Version: 0.9.2**\n\n## Installation\n\nYou can download the latest release [here](https://github.com/PioBeat/offbeatSlider/releases).\nJust copy the [css](https://raw.githubusercontent.com/PioBeat/offbeatSlider/master/css/offbeat-slider.css) and \n[js](https://raw.githubusercontent.com/PioBeat/offbeatSlider/master/js/offbeat-slider.js) file into your project directory.\nThen include it like this in your web page:\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"\"\u003e\n\u003chead\u003e\n    \u003c!-- YOUR HEADER --\u003e\n    \u003clink rel=\"stylesheet\" href=\"css/offbeat-slider.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n    \u003c!-- YOUR CONTENT --\u003e\n\n    \u003c!-- jQuery --\u003e\n    \u003cscript src=\"https://code.jquery.com/jquery-1.12.0.min.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- offbeatSlider Plugin --\u003e\n    \u003cscript src=\"js/offbeat-slider.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Quick Example\n\nThis example shows two different styles for the positioning of the navigation controls and the setting of the start image:\n\n\u003cimg src=\"/art/example1.png\" width=\"49%\" /\u003e\n\nCode:\n```html\n\u003c!-- Left example --\u003e\n\n\u003cdiv class=\"ofp-slider\" data-slider-index=\"1\"\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Hydrangeas.jpg\"\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Jellyfish.jpg\"\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Koala.jpg\"\u003e\n\n    \u003cdiv class=\"ofp-slider-navigation ofp-center ofp-middle\"\u003e\n        \u003cdiv class=\"ofp-arrow-left\"\u003e\u0026#10094;\u003c/div\u003e\n        \u003cdiv class=\"ofp-arrow-right\"\u003e\u0026#10095;\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ofp-slider-navigation ofp-bottom-middle\"\u003e\n        \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n        \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n        \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\n \u003c!-- Right example --\u003e\n\n\u003cdiv class=\"ofp-slider\" data-slider-index=\"2\"\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Hydrangeas.jpg\"\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Jellyfish.jpg\"\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Koala.jpg\"\u003e\n\n    \u003cdiv class=\"ofp-slider-navigation ofp-top-right\"\u003e\n        \u003cdiv class=\"ofp-arrow-left\"\u003e \u0026#10096;\u003c/div\u003e\n        \u003cdiv class=\"ofp-arrow-right\"\u003e \u0026#10097;\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ofp-slider-navigation ofp-center ofp-bottom-middle\"\u003e\n        \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n        \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n        \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Basic Usage\n\n### HTML\nTo transform a div into a slide show add the class ``ofp-slider`` to a div and append some images as direct child. For each image\nadd the class ``ofp-slides``.\n```html\n\u003cdiv class=\"ofp-slider\" data-slider-index=\"1\"\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Hydrangeas.jpg\"\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Jellyfish.jpg\"\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Koala.jpg\"\u003e\n\n    \u003cdiv class=\"ofp-slider-navigation ofp-center ofp-middle\"\u003e\n        \u003cdiv class=\"ofp-arrow-left\"\u003e\u0026#10094;\u003c/div\u003e\n        \u003cdiv class=\"ofp-arrow-right\"\u003e\u0026#10095;\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"ofp-slider-navigation ofp-bottom-middle\"\u003e\n        \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n        \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n        \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\nThe data attribute ``slider-index`` specifies the index of the first slide to show.\n\n### JavaScript\nNext, put this piece of code at the end of your page:\n```javascript\n$(\".ofp-slider\").offbeatSlider({\"slideStartIndex\": 1});\n```\nThe option ``slideStartIndex`` defines the index of the first slide to show for every slide show div if\nthe data attribute ``slider-index`` is not defined.\n\n## Options\n\n**First slide** (JavaScript / data-attribute)\n\nJavaScript property ``slideStartIndex`` sets the first slide image for all slide show containers if no\ndata-attribute ``slider-index`` is specified in the corresponding div with the class ``ofp-slider``.\n\n**Animation**\n\nYou can set the transition animation for each slide in the slide show with these options:\n```javascript\n$(\".ofp-slider\").offbeatSlider({\n                                   animate: true,\n                                   duration: 1000,\n                                   animation: \"normal\",\n                                   easing: \"linear\" //easein, linear, ...\n                               });\n```\nYou can adjust the duration and the easing function. The name for the easing functions are the same as in jQuery.\nThis is the default slider implementation. A simple and beautiful fade-in transition is created.\n\nIf you want to use specific CSS3 animations you have to declare the following settings:\n```javascript\n$(\".ofp-slider\").offbeatSlider({\n                                   animate: true,\n                                   animation: \"css\",\n                                   animationRight: \"swing-in-right-fwd\",\n                                   animationLeft: \"swing-in-left-fwd\"\n                               });\n```\n\nThe ``animation`` property tells the slider to use the ``animationRight`` and ``animationLeft`` values which are CSS animations\nfor both directions. Those classes have to be available in a css file. The same settings can also be made available in the correspondig div\nwith the data-attributes ``data-animation-right`` and ``data-animation-left``:\n```html\n\u003cdiv class=\"ofp-slider\" data-animation-right=\"swing-in-right-fwd\" data-animation-left=\"swing-in-left-fwd\"\u003e\n\u003c!-- more ... --\u003e\n\u003c/div\u003e           \n```\n\nTo create CSS animations you can use [animista](http://animista.net).\n\n**Carousel**\n\nAutomatically show the available slides in sequence with these options:\n```javascript\n$(\".ofp-slider\").offbeatSlider({\n            carousel: true, //auto-animate ?\n            carouselDelay: 3000\n        });\n```\n\nThe default of the carousel animation is ``false`` which means the slides won't be shown automatically one by one.\n\n## Customisation\n\n### Positioning of navigation controls\n\n**Combined**\nSlider dots and arrows as one unit:\n```html\n\u003cdiv class=\"ofp-slider-navigation ofp-center ofp-middle\"\u003e\n    \u003cdiv class=\"ofp-arrow-left\"\u003e\u0026#10094;\u003c/div\u003e\n    \u003cdiv class=\"ofp-arrow-right\"\u003e\u0026#10095;\u003c/div\u003e\n    \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n    \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n    \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\nBoth controls will be displayed centered horizontally and vertically within the image.\n\n**Separated**\nUse two div-containers with class ``ofp-slider-navigation``:\n```html\n\u003cdiv class=\"ofp-slider-navigation ofp-center ofp-top-middle\"\u003e\n    \u003cdiv class=\"ofp-arrow-left\"\u003e\u0026#10094;\u003c/div\u003e\n    \u003cdiv class=\"ofp-arrow-right\"\u003e\u0026#10095;\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"ofp-slider-navigation ofp-center ofp-bottom-middle\"\u003e\n    \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n    \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n    \u003cspan class=\"ofp-slider-dots\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\nArrow controls will be displayed at the top and the dots are displayed at the bottom within the image.\n\n#### \u003ca name=\"positioning\"\u003e\u003c/a\u003e Classes for positioning\n\nAny meaningful combination of the listed css classes is possible to position\nthe navigation controls or the image description.\n\n```css\nofp-center\nofp-top-left\nofp-top-right\nofp-bottom-left\nofp-bottom-right\nofp-middle\nofp-left\nofp-right\nofp-top-middle\nofp-bottom-middle\n```\n\n### Text slide\n\nYou can have a text-only slide if you add the css class ``ofp-slides-text`` next to ``ofp-slides``:\n```html\n\u003cdiv class=\"ofp-slider\" data-slider-index=\"1\"\u003e\n    \u003cdiv class=\"ofp-slides ofp-slides-text\"\u003e\n        I'm a nice text slide\n    \u003c/div\u003e\n    \u003cimg class=\"ofp-slides\" src=\"img/Hydrangeas.jpg\"\u003e\n    \u003cdiv class=\"ofp-slides ofp-slides-text\"\u003e\n        I'm the \u003cstrong\u003elast\u003c/strong\u003e nice text slide\n    \u003c/div\u003e\n    \u003cdiv class=\"ofp-slider-navigation ofp-top-right\"\u003e\n        \u003cdiv class=\"ofp-arrow-left\"\u003e\u0026#10096;\u003c/div\u003e\n        \u003cdiv class=\"ofp-arrow-right\"\u003e\u0026#10097;\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\nWith this piece of code you have 3 slides consisting of a text slide, image slide, and a text slide. The\nnavigation is placed at the top right corner.\n\n### Image slide with description\nFor that case:\n```html\n\u003cdiv class=\"ofp-slides\"\u003e\n    \u003cimg src=\"img/Hydrangeas.jpg\"\u003e\n    \u003cp class=\"ofp-top-middle\" style=\"color: #efefef; font-size: 1em; font-weight: bold;\"\u003e\n        Description for the picture\n    \u003c/p\u003e\n\u003c/div\u003e\n```\nFor the positioning of the description use the same classes as described in \u003ca href=\"#positioning\"\u003eClasses for positioning\u003c/a\u003e\n\n### Arrow symbols\n\nUse any character within the div-container with class ``ofp-arrow-left`` to represent the left arrow and with\nclass ``ofp-arrow-right`` for the right arrow.\n\nTo change the _size of the symbols_ add the ``font-size`` property to the mentioned classes.\n\n**Examples**\n\nThe following table shows some common arrow symbols with their corresponding HTML codes:\n\nHTML code| Symbol\n---------|---------\n``\u0026#10094;``|\u0026#10094;\n``\u0026#10095;``|\u0026#10095;\n``\u0026#10096``|\u0026#10096;\n``\u0026#10097``|\u0026#10097;\n``\u0026#171;``|\u0026#171;\n``\u0026#187;``|\u0026#187;\n\n### Further examples\n\nPlease look into the [test page](index.html) for further examples.\n\n## Websites using \u003ci\u003eoffbeatSlider\u003c/i\u003e\n\n\u003cp\u003efeel free to send me your website using this component! :)\u003c/p\u003e\n\n* [DollStuff](http://www.dollstuff.de/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiobeat%2Foffbeatslider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiobeat%2Foffbeatslider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiobeat%2Foffbeatslider/lists"}