{"id":13403997,"url":"https://github.com/joelambert/Flux-Slider","last_synced_at":"2025-03-14T08:32:21.932Z","repository":{"id":698598,"uuid":"1705750","full_name":"joelambert/Flux-Slider","owner":"joelambert","description":"CSS3 Animation based image transitions","archived":false,"fork":false,"pushed_at":"2022-06-21T04:35:02.000Z","size":4120,"stargazers_count":1418,"open_issues_count":33,"forks_count":283,"subscribers_count":77,"default_branch":"master","last_synced_at":"2025-03-02T16:06:14.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.joelambert.co.uk/flux","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joelambert.png","metadata":{"files":{"readme":"README.md","changelog":"change.log","contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-05-05T10:40:37.000Z","updated_at":"2025-02-26T12:13:57.000Z","dependencies_parsed_at":"2022-08-16T10:45:17.804Z","dependency_job_id":null,"html_url":"https://github.com/joelambert/Flux-Slider","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelambert%2FFlux-Slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelambert%2FFlux-Slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelambert%2FFlux-Slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelambert%2FFlux-Slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joelambert","download_url":"https://codeload.github.com/joelambert/Flux-Slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242721871,"owners_count":20174805,"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-07-30T19:01:37.483Z","updated_at":"2025-03-14T08:32:21.899Z","avatar_url":"https://github.com/joelambert.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# Flux Slider\nFlux slider is a CSS3 animation based image transition framework, inspired in part by the fantastic [Nivo Slider](nivo.dev7studios.com) jQuery plugin.\n\nInstead of the traditional Javascript timer based animations used by jQuery, Flux utilises the newer, more powerful CSS3 animation technology. Its in a fairly early/rough state at the moment but testing on the iPhone/iPad does appear to produce much smoother animations. Desktop performance (as with Nivo) is very smooth but the use of CSS3 enables us to produce some new effects that Nivo can’t, e.g. rotations.\n\nThe aim is to use hardware acceleration where possible to improve performance on less powerful devices, such as mobiles \u0026 tablets.\n\n## Known to work with\n- Safari \n- Chrome\n- iOS\n- Blackberry Playbook\n- Firefox 4\n- Opera 11\n\n## May/should also work for\n- Android (Known to be jerky due to lack of hardware acceleration)\n\n# Requirements\nFlux requires a browser which supports CSS3 transformations and has been built to use either jQuery or [Zepto.js](http://zepto.js) as they share the same API. For mobile deployment Zepto is recommended due to its \u003c5k deployment footprint.\n\n# Usage\nCreate HTML markup with the images you wish to use. You can also wrap images in a link if you need them to be clickable. For example:\n\n\t\u003cdiv id=\"slider\"\u003e\n\t\t\u003cimg src=\"img/avatar.jpg\" alt=\"\" /\u003e\n\t\t\u003cimg src=\"img/ironman.jpg\" alt=\"\" title=\"Ironman Screenshot\" /\u003e\n\t\t\u003ca href=\"\"\u003e\u003cimg src=\"img/imagewithlink.jpg\" alt=\"\" /\u003e\u003c/a\u003e\n\t\t\u003cimg src=\"img/tron.jpg\" alt=\"\" /\u003e\n\t\u003c/div\u003e\n\t\nNext instantiate Flux Slider:\n\n\t$(function(){\n\t\twindow.myFlux = new flux.slider('#slider');\n\t});\n\t\nOr, if you're using the provided jQuery widget then you can also do the following:\n\t\n\t$(function(){\n\t\twindow.myFlux = $('#slider').flux();\n\t});\n\t\n*Note: If you plan to use the Zepto framework then the widget method won't work*\n\n## A note on feature detection\nFlux now makes use of [Modernizr](http://www.modernizr.com) when available for feature detection. Flux **does not** require Modernizr but it will use it instead of the inbuilt code if it's loaded.\n\nNote: If you have a need to initialise Flux before the `$.ready()` event (*not recommended!*) then you will need to use Modernizr for feature detection as the inbuilt code does not play well with an uninitialised DOM.\n\t\n## Configuration options\nThe \u003cflux.slider\u003e constructor can also take an optional second parameter which is an object of key/value configuration options.\n\n- \t**autoplay** Boolean *(default: true)*\n\t\n\tWhether or not the slider should start to play automatically\n\t\n- \t**pagination** Boolean *(default: false)*\n\n\tWhether or not to show a pagination control for manually selecting the image to show\n\t\n- \t**controls** Boolean *(default: false)*\n\n\tWhether or not to show a next/prev controls\n\t\n- \t**captions** Boolean *(default: false)*\n\n\tWhether or not to show a caption bar. Captions are read from the `title` attribute of loaded `img` elements\n\t\n- \t**transitions** Array *(default: all available transitions)*\n\n\tAn array with the names of the transitions to use, available options are:\n\t\n\t+ **2D**\n\t\t- `bars`\n\t\t- `blinds`\n\t\t- `blocks`\n\t\t- `blocks2`\n\t\t- `concentric`\n\t\t- `dissolve` *requires mask support*\n\t\t- `slide`\n\t\t- `warp`\n\t\t- `zip`\n\t+ **3D**\n\t\t- `bars3d`\n\t\t- `blinds3d`\n\t\t- `cube`\n\t\t- `tiles3d`\n\t\t- `turn`\n\t\n- \t**delay** Integer *(default: 4000)*\n\n\tThe number of milliseconds to wait between image transitions\n\t\nFor example, to prevent autoplay and show a pagination control you would do the following:\n\n\t$(function(){\n\t\twindow.myFlux = new flux.slider('#slider', {\n\t\t\tautoplay: false,\n\t\t\tpagination: true\n\t\t});\n\t});\n\t\nOr with the jQuery widget:\n\n\t$(function(){\n\t\twindow.myFlux = $('#slider').flux({\n\t\t\tautoplay: false,\n\t\t\tpagination: true\n\t\t});\n\t});\n\n## flux.slider API\n\nThe API functions work with both the native Javascript object and the jQuery widget. For example:\n\n\t// Show next image using the bars3d transition (native Javascript object)\n\twindow.myFlux.next('bars3d');\n\t\nor\n\n\t// Show next image using the bars3d transition (jQuery widget)\n\twindow.myFlux.flux('next', 'bars3d');\n\t\n*Note: All the jQuery widget functions are chainable except those that return something specific, such as `isPlaying()` \u0026 `getImage()`.*\n\nFor more information on using jQuery widgets see the [jQuery Doc's](http://docs.jquery.com/UI_Developer_Guide);\n\n### Play controls\n- `start()` Enable autoplay\n- `stop()` Disable autoplay\n- `isPlaying()` Returns a boolean as to whether autoplay is currently enabled\n\n### Transport controls\n- \t`next([transition [, options]])` \n\n\tShow the next image. \n\t\n\t`transition` *(optional)* The name of the transition to use, otherwise one picked at random\n\t\n\t`options` *(optional)* Transition specific options for this transition only\n\t\n- \t`prev([transition [, options]])` \n\n\tShow the previous image. \n\t\n\t`transition` *(optional)* The name of the transition to use, otherwise one picked at random\n\t\n\t`options` *(optional)* Transition specific options for this transition only\n\t\n- \t`showImage(index [, transition [, options]])` \n\n\tShow the image at `index`. \n\t\n\t`transition` *(optional)* The name of the transition to use, otherwise one picked at random\n\t\n\t`options` *(optional)* Transition specific options for this transition only\n\n### Misc\n- `getImage(index)` Returns the image with the provided index\n\n### Receiving notification when a transition completes\n\nThere are occasions where you may wish to know when a transition has completed, or that the currently displayed image has changed.\n\nFlux provides a couple of mechanisms for this:\n\n#### `fluxTransitionEnd` Javascript Event\n\nAfter each transition, Flux dispatches a `fluxTransitionEnd` event. To listen for these events you can do the following:\n\n\t$('#slider').bind('fluxTransitionEnd', function(event) {\n\t\tvar img = event.data.currentImage;\n\t\t// Do something with img...\n\t});\n\n#### `onTransitionEnd` callback function\n\t\nYou can alternatively pass in a callback function as part of the configuration options when you instantiate Flux, e.g.\n\n\twindow.myFlux = $('#slider').flux({\n\t\tautoplay: false,\n\t\tpagination: true,\n\t\tonTransitionEnd: function(data) {\n\t\t\tvar img = data.currentImage;\n\t\t\t// Do something with img...\n\t\t}\n\t});\n\t\n# Writing custom transitions\nWriting your own custom transitions is easy, you just need to create an instance of a `flux.transition` object and pass in some callback functions to provide the custom behaviour you're looking for.\n\nLets look at the built in **bars** transition as an example. The barebones definition of the transition looks like:\n\n\tflux.transitions.bars = function(fluxslider, opts) {\n\t\treturn new flux.transition(fluxslider, $.extend({\n\t\t\tbarWidth: 60,\n\t\t\tsetup: function() {\n\t\t\t\t\n\t\t\t},\n\t\t\texecute: function() {\n\t\t\t\t\n\t\t\t}\n\t\t}, opts));\t\n\t}\n\nHere we add a new function to the `flux.transitions` namespace called **bars**. This function takes two parameters, a `flux.slider` object and an options key/value object. \n\n*Note: Its currently not possible to pass options into transitions from the core flux.slider code but as this is on the list of things to add its a good idea to make sure the transitions can handle this when its implemented!*\n\nThe function we create should return a new `flux.transition` object, passing in the `flux.slider` parameter along with a set of options.\n\nAll transition objects automatically have access to the following:\n\n- \t`this.slider` \n\n\tThe `flux.slider` object passed into the constructor. From this object you can access the current image `this.slider.image1` and the next image `this.slider.image2`.\n\t\n- \t`this.options`\n\n\tThe options passed in as the 2nd parameter to the `flux.transition` constructor call.\n\t\n\n## setup()\nTwo functions are needed for the transition to operate, first is `setup`. This function is responsible for initialising the DOM before the transition runs. In the case of the bars transition this function creates a `div` for each bar and set the background image so that adjacent bars appear as a single image.\n\nThe setup function should also initialise the CSS3 properties needed to enable a CSS transition.\n\n\tsetup: function() {\n\t\tvar barCount = Math.floor(this.slider.image1.width() / this.options.barWidth) + 1\n\t\n\t\tvar delayBetweenBars = 40;\n\t\n\t\tfor(var i=0; i\u003cbarCount; i++) {\n\t\t\tvar bar = $('\u003cdiv\u003e\u003c/div\u003e').attr('class', 'bar bar-'+i).css({\n\t\t\t\twidth: this.options.barWidth+'px',\n\t\t\t\theight: '100%',\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: '0',\n\t\t\t\tleft: (i*this.options.barWidth)+'px',\n\t\t\t\n\t\t\t\t'background-image': this.slider.image1.css('background-image'),\n\t\t\t\t'background-position': '-'+(i*this.options.barWidth)+'px 0px'\n\t\t\t}).css3({\n\t\t\t\t'transition-duration': '400ms',\n\t\t\t\t'transition-timing-function': 'ease-in',\n\t\t\t\t'transition-property': 'all',\n\t\t\t\t'transition-delay': (i*delayBetweenBars)+'ms'\n\t\t\t});\n\t\t\tthis.slider.image1.append(bar);\n\t\t}\n\t}\n\nA helper function called `.css3()` has been created for convenience to automatically add vendor prefixes to CSS3 properties. Any properties that require prefixes should be added via this function rather than `.css()` as this ensures that transitions are cross-browser compatible.\n\t\n## execute()\nThe `execute` function is where the CSS changes should be made, as transitions have already been initialised in `setup()` applying the end CSS property state should be all thats required:\n\n\texecute: function() {\n\t\tvar _this = this;\n\t\n\t\tvar height = this.slider.image1.height();\n\n\t\tvar bars = this.slider.image1.find('div.bar');\n\t\n\t\t// Get notified when the last transition has completed\n\t\t$(bars[bars.length-1]).transitionEnd(function(){\n\t\t\t_this.finished();\n\t\t});\n\t\n\t\tbars.css({\n\t\t\t'opacity': '0.5'\n\t\t}).css3({\n\t\t\t'transform': flux.browser.translate(0, height)\n\t\t});\n\t}\n\t\nTwo further convenience functions have been used in this example. The first `.transitionEnd()` is a cross-browser event function to catch the 'transition end' event. In this example we want to be notified when the final bar as finished animating, this is how we know the transition is complete. We can then perform some custom code but its important to remember to call the transitions `finished()` function to ensure that the DOM is reset for the next transition.\n\n## Transition writing guidelines\n\nHere are some guidelines for writing transitions if you'd like to have them considered for inclusion into the main distribution:\n\n- \tIf the transition requires 3D transforms you must set the `requires3d` property to `true`. e.g.\n\t\n\t\tflux.transitions.bars3d = function(fluxslider, opts) {\n\t\t\treturn new flux.transition(fluxslider, $.extend({\n\t\t\t\trequires3d: true,\n\t\t\t\tsetup: function() {\n\t\t\t\t\t...\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n- \tFor delaying animations to specific bars/blocks/tiles use `-[webkit/moz/o]-transition-delay` rather than `setTimeout()`/`setInterval()`. This enables the GPU to handle the timing and makes for smoother transitions.\n\n- \tWhen using many new bars/blocks/tiles, add them to a container element off DOM and then add the container in one go, e.g.\n\t\n\t\tvar container = $('\u003cdiv\u003e\u003c/div\u003e');\n\t\t\n\t\tfor(var i=0; i\u003c10; i++) {\n\t\t\tvar elem = $('\u003cdiv\u003e\u003c/div');\n\t\t\tcontainer.append(elem);\n\t\t}\n\t\t\n\t\tthis.image.slider1.append(container);\n\n# flux.browser\n\n`flux.browser` is an object designed to help determine browser support for CSS3 transitions.\n\n- \t`supportsTransitions` *Boolean* \n\n\tDoes the current browser support CSS3 transitions?\n\t\n- \t`supports3d` *Boolean* \n\n\tDoes the current browser support 3D CSS3 transitions?\n\t\n- \t`translate(x, y, z)`\n\n\tReturns a CSS translate string most suitable for the current browser, for example under iOS where 3D transformations are supported `flux.browser.translate(10, 20)` would return `translate3d(10, 20, 0)` so as to trigger hardware acceleration.\n\t\n- \t`rotate(axis, deg)`\n\t\n\tOperates the same as the above translate function and returns the most suitable CSS for the current browser.\n\t\n- \t`rotateX(deg)`\n\n\tReturns the result of calling `flux.browser.rotate('x', deg)` *Requires 3D transformation support*\n\t\n- \t`rotateY(deg)`\n\n\tReturns the result of calling `flux.browser.rotate('y', deg)` *Requires 3D transformation support*\n\t\n- \t`rotateZ(deg)`\n\n\tReturns the result of calling `flux.browser.rotate('z', deg)`\n\t\n# License\n\nFlux is Copyright \u0026copy; 2011 [Joe Lambert](http://www.joelambert.co.uk) and is licensed under the terms of the [MIT License](http://www.opensource.org/licenses/mit-license.php).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoelambert%2FFlux-Slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoelambert%2FFlux-Slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoelambert%2FFlux-Slider/lists"}