{"id":24374680,"url":"https://github.com/ruisoftware/jquery-rsslideit","last_synced_at":"2025-04-10T19:11:56.525Z","repository":{"id":14828855,"uuid":"17551635","full_name":"ruisoftware/jquery-rsSlideIt","owner":"ruisoftware","description":"Slideshow/Presentation tool that uses 2D/3D CSS3 transformations","archived":false,"fork":false,"pushed_at":"2017-03-22T15:14:41.000Z","size":374,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T00:07:34.910Z","etag":null,"topics":["animation","animation-3d","codepen","fallback","interpolation","javascript","jquery","matrix","matrix3d","modernizr","older-browsers","slide","slideshow","transformations","transition"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruisoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-08T21:40:32.000Z","updated_at":"2024-08-25T05:40:41.000Z","dependencies_parsed_at":"2022-09-19T23:22:07.991Z","dependency_job_id":null,"html_url":"https://github.com/ruisoftware/jquery-rsSlideIt","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsSlideIt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsSlideIt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsSlideIt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruisoftware%2Fjquery-rsSlideIt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruisoftware","download_url":"https://codeload.github.com/ruisoftware/jquery-rsSlideIt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248279800,"owners_count":21077408,"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":["animation","animation-3d","codepen","fallback","interpolation","javascript","jquery","matrix","matrix3d","modernizr","older-browsers","slide","slideshow","transformations","transition"],"created_at":"2025-01-19T05:41:05.955Z","updated_at":"2025-04-10T19:11:56.506Z","avatar_url":"https://github.com/ruisoftware.png","language":"JavaScript","readme":"# jquery-rsSlideIt [![Build Status](https://travis-ci.org/ruisoftware/jquery-rsSlideIt.svg?branch=master)](https://travis-ci.org/ruisoftware/jquery-rsSlideIt)\nPerforms a smooth 2D/3D transition from one HTML element A to another element B.\u003cbr\u003e\nThe transition works be progressively morphing A's transform into B's [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform \"Transform documentation\").\n\nCheck out a [2D demo](http://codepen.io/ruisoftware/pen/GpyEyG \"on CodePen\") on CodePen, and also one\n[3D demo](http://codepen.io/ruisoftware/pen/xwNrqM \"on CodePen\") with fallback to 2D for older browsers.\n\n# Key Features\n - Runs a single transition or a sequence of transitions;\n - Transition effect is automatically computed between two slides;\n - Fallbacks to browsers that do not support 3D transformations and CSS3 animations;\n - Highly customizable:\n \t- Any markup you want. Only restriction is sliders to be contained in a parent blocked element;\n \t- Strong event driven support;\n \t- Single transition or a sequence of transitions (movie mode);\n \t- Transition duration, easing function animation and zoom vertexes;\n \t- Optional user zoomming and panning between each transition.\n * Responsive design, suitable for any window sizes;\n * Optionally loads images asynchronously to save page load times, when slides are images.\n \n# Installation\n\nYou can install from [npm](https://www.npmjs.com/):\n````bash\nnpm install jquery.rsSlideIt --save\n````\nor directly from git:\n````javascript\n\u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsSlideIt/master/src/jquery.rsSlideIt.js\"\u003e\u003c/script\u003e\n````\nor you can download the Zip archive from github, clone or fork this repository and include `jquery.rsSlideIt.js` from your local machine.\n\nYou also need to download jQuery. In the example below, jQuery is downloaded from Google cdn.\n\n# Usage\n\n## 1. Add script\n````javascript\n\u003cscript src=\"http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsSlideIt/master/libs/modernizr.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"http://rawgit.com/ruisoftware/jquery-rsSlideIt/master/src/jquery.rsSlideIt.js\"\u003e\u003c/script\u003e\n````\nIf you care about older browsers, primarily versions of IE prior to IE9, then replace the jQuery `2.1.4` by `1.11.3`.\n\nThe [Modernizr](#fallbacks) library should be loaded before the plugin.\n\njquery.rsSlideIt.js should be loaded after the jQuery and Modernizr libraries. In production environment, it is recommended the use of the minimized version `jquery.rsSlideIt.min.js`.\n\n## 2. HTML\nCreate a blocked element with slide elements inside.\n````html\n\u003cdiv id=\"container\"\u003e\n\t\u003cimg id=\"slide1\" src=\"http://placehold.it/200?text=slide1\"\u003e\n\t\u003cimg id=\"slide2\" src=\"http://placehold.it/200?text=slide2\"\u003e\n\t\u003cimg id=\"slide3\" src=\"http://placehold.it/200?text=slide3\"\u003e\n\t\u003cimg id=\"slide4\" src=\"http://placehold.it/200?text=slide4\"\u003e\n\u003c/div\u003e\n\u003cbutton id=\"prev\"\u003eprevious\u003c/button\u003e\n\u003cbutton id=\"next\"\u003enext\u003c/button\u003e\n````\nThe above markup represents a viewport with 4 slides.\nAny markup can be used. Your container does not have to be a `div` and your slides do not have to `img`.\n\n## 3. Javascript\nCreate plugin instance and set previous/next events\n````javascript\n$(function () {\n\t$(\"#container\").rsSlideIt({\n\t\twidth: 500,\n\t\theight: 300\n\t});\n\n\t$(\"#prev, #next\").click(function () {\n\t\t$(\"#container\").rsSlideIt('transition', {\n\t\t\tslide: this.id // destination slide is either 'prev' or 'next', depending on which button is pressed\n\t\t});\n\t});\n});\n````\n\n## 4. CSS (optional)\n````css\n\t#slide1 {\n\t\ttransform: rotate(30deg);\n\t}\n\t#slide3 {\n\t\ttransform: rotate(-30deg) skew(150deg) translateY(100px);\n\t}\n````\n\n# How it works\nDuring the plugin initialization, the plugin performs two tasks:\n 1. Loads the CSS transform property of each slide into an internal data structure.\n 2. Inserts a `div` element between your container and the slides, i.e., it changes the DOM from\n````html\n\u003cdiv id=\"container\"\u003e\n\t\u003cimg id=\"slide1\" src=\"http://placehold.it/200?text=slide1\"\u003e\n\t\u003cimg id=\"slide2\" src=\"http://placehold.it/200?text=slide2\"\u003e\n\t\u003cimg id=\"slide3\" src=\"http://placehold.it/200?text=slide3\"\u003e\n\t\u003cimg id=\"slide4\" src=\"http://placehold.it/200?text=slide4\"\u003e\n\u003c/div\u003e\n````\nto\n````html\n\u003cdiv id=\"container\"\u003e\n\t\u003cdiv\u003e \u003c!-- new div element --\u003e\n\t\t\u003cimg id=\"slide1\" src=\"http://placehold.it/200?text=slide1\"\u003e\n\t\t\u003cimg id=\"slide2\" src=\"http://placehold.it/200?text=slide2\"\u003e\n\t\t\u003cimg id=\"slide3\" src=\"http://placehold.it/200?text=slide3\"\u003e\n\t\t\u003cimg id=\"slide4\" src=\"http://placehold.it/200?text=slide4\"\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n````\nLet's call this new `div` the *world*.\n\nWhen a request to make a transition to a slideN is received, the plugin smoothly changes the *world* transformation to the slideN reverse transformation, e.g., if your slides are\n````css\n#slide1 { transform: none; }\n#slide2 { transform: rotate(30deg); }\n#slide3 { transform: rotate(25deg) skew(45deg); }\n#slide4 { transform: skew(-15deg); }\n````\nthen when a transition is done:\n * from slide1 to slide2, the *world* transform changes from `rotate(0)` to `rotate(-30deg)`.\n * from slide2 to slide3, the *world* transform changes from `rotate(-30deg) skew(0)` to `rotate(-25deg) skew(-45deg)`.\n * from slide3 to slide4, the *world* transform changes from `rotate(-25deg) skew(-45deg)` to `rotate(0) skew(15deg)`.\n * from slide4 to slide1, the *world* transform changes from `skew(15deg)` to `skew(0)`.\n\n\n# Fallbacks\nThe plugin uses [Modernizr](https://modernizr.com/) for CSS3 feature detection. If Modernizr is not loaded (see [Add Script](#installation-and-usage)), the plugin assumes that your browser does not support the latest CSS3 features and resorts to Javascript fallbacks, even on modern browsers. Thus it is highly recommended to include Modernizr. Specifically, the Modernizr properties required by the plugin are [cssanimations and csstransforms3d](https://modernizr.com/download?cssanimations-csstransforms3d-setclasses).\n\n## 3D transformations\nIf 3D transformations are not supported by the browser, the plugin adds a fallback class to the container element, which is by default `no3D`.\nSo, if you 3D slide is `rotateX(45deg) rotateZ(5deg)` you can fallback it to 2D, by adding another CSS rule:\n````css\n#mySlide { transform: rotateX(45deg) rotateZ(5deg); }   /* 3D transformation */\n.no3D #mySlide { transform: rotate(5deg); }             /* 2D fallback for older browsers */\n````\nPlease note, that if Modernizr is not loaded on browsers that support 3D transformations, and no 2D CSS fallback is defined, the 3D transformations will still render correctly, but the plugin will make 2D transitions, because the plugin relies on what is returned by Modernizr.csstransforms3d, and if Modernizr is missing, it means returning false.\n\nHere is one [3D demo](http://codepen.io/ruisoftware/pen/xwNrqM \"on CodePen\") with a fallback to 2D on older browsers. You can see a preview [here](http://codepen.io/ruisoftware/pen/avrwLX) on how the 3D demo looks like in older browsers.\n\n## CSS animations\nIf [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) are not supported by the browser, the plugin gracefully degradates to javascript animation using [requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).\nStill, if requestAnimationFrame() is not supported by the browser, then a [jQuery.animate()](http://api.jquery.com/animate/) based animation is used instead.\n\n# License\nThis project is licensed under the terms of the [MIT license](https://opensource.org/licenses/mit-license.php)\n\n# Bug Reports \u0026 Feature Requests\nPlease use the [issue tracker](https://github.com/ruisoftware/jquery-rsSlideIt/issues) to report any bugs or file feature requests.\n\n# Contributing\nPlease refer to the [Contribution page](https://github.com/ruisoftware/jquery-rsSlideIt/blob/master/CONTRIBUTING.md) from more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rsslideit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruisoftware%2Fjquery-rsslideit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruisoftware%2Fjquery-rsslideit/lists"}