{"id":13596020,"url":"https://github.com/peduarte/wallop","last_synced_at":"2025-04-08T02:40:41.484Z","repository":{"id":11258317,"uuid":"13659798","full_name":"peduarte/wallop","owner":"peduarte","description":":no_entry: currently unmaintained :no_entry: A minimal JS library for showing \u0026 hiding things","archived":false,"fork":false,"pushed_at":"2020-04-21T18:08:04.000Z","size":7153,"stargazers_count":1100,"open_issues_count":10,"forks_count":79,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-04-01T01:41:12.671Z","etag":null,"topics":["animation","css","minimal","slider"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/peduarte.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":"2013-10-17T20:06:15.000Z","updated_at":"2025-02-09T04:40:14.000Z","dependencies_parsed_at":"2022-09-11T07:51:48.680Z","dependency_job_id":null,"html_url":"https://github.com/peduarte/wallop","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Fwallop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Fwallop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Fwallop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Fwallop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peduarte","download_url":"https://codeload.github.com/peduarte/wallop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767232,"owners_count":20992538,"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","css","minimal","slider"],"created_at":"2024-08-01T16:02:04.840Z","updated_at":"2025-04-08T02:40:41.464Z","avatar_url":"https://github.com/peduarte.png","language":"CSS","funding_links":[],"categories":["CSS","Frameworks / Resources"],"sub_categories":["W"],"readme":"# wallop\n[![Build Status](https://travis-ci.org/peduarte/wallop.svg)](https://travis-ci.org/peduarte/wallop) [![npm version](https://badge.fury.io/js/wallop.svg)](http://badge.fury.io/js/wallop)\n\n### Much more than just a slider\nwallop is a minimal 4kb library for showing \u0026 hiding things.\n\n\u003e ❗️**Important note**️\u003cbr\u003e\n\u003e Version 1 of *WallopSlider* is not compatible with version 2+.\u003cbr\u003e\n\u003e If you are still using v1, please note that I am no longer supporting it.\u003cbr\u003e\n\u003e Documentation, etc. has been moved to [this branch](https://github.com/peduarte/wallop/tree/v1).\n\n## About\nIn a nutshell, wallop takes a collection of HTML elements and Previous \u0026 Next buttons, and adds helper HTML classes in the correct elements based on whether you want to navigate forwards or backwards.\n\nIt basically just add the right classes in the right places at the right time.\n\nWith those classes, you can do an infinite [number of things](#real-life-examples), controlling what's shown or hidden with CSS.\n\n## Examples\n- [Basic](http://codepen.io/peduarte/pen/pjzYpG) – This is wallop's most basic implementation\n- [Fade animation](http://codepen.io/peduarte/pen/RWbORJ) – Using one of the [available animations](#adding-animations)\n- [Custom pagination](http://codepen.io/peduarte/pen/bVbZLK) – Create your own pagination by levaragin the power of wallops' API and CustomEvents\n\nI've created a collection on **[Codepen](http://codepen.io/collection/DQWmxZ/)** with a few more examples, go take a 👀!\n\n## Benefits\n- Mobile first\n- Progressive enhancement\n- Transitions/Animations are all in CSS\n- Minimal JavaScript\n- Flexible \u0026 Scalable\n- Custom events and API available\n- 4KB minified\n- Dependency free\n\n## Install\nWith npm\n\n```bash\n$ npm install wallop\n```\n\nWith bower\n\n```bash\n$ bower install wallop\n```\n\nDownload\u003cbr\u003e\nYou can download the latest version or checkout all the releases [here](https://github.com/peduarte/wallop/releases).\n\n## Usage\nOnce you have downloaded Wallop, the first thing you need to do is include the CSS and the JavaScript.\n\n### CSS\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"path/to/wallop.css\"\u003e\n\u003c/head\u003e\n```\n\n### JavaScript\n```html\n\u003cscript src=\"path/to/Wallop.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var wallopEl = document.querySelector('.Wallop');\n  var slider = new Wallop(wallopEl);\n\u003c/script\u003e\n```\n\n### commonJS\n```js\n  var Wallop = require('Wallop');\n```\n\n### ES6\n```js\n  import Wallop from 'Wallop';\n```\n\n### HTML\n```html\n\u003cdiv class=\"Wallop\"\u003e\n  \u003cdiv class=\"Wallop-list\"\u003e\n    \u003cdiv class=\"Wallop-item\"\u003e…\u003c/div\u003e\n    \u003cdiv class=\"Wallop-item\"\u003e…\u003c/div\u003e\n    \u003cdiv class=\"Wallop-item\"\u003e…\u003c/div\u003e\n    \u003cdiv class=\"Wallop-item\"\u003e…\u003c/div\u003e\n    \u003cdiv class=\"Wallop-item\"\u003e…\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cbutton class=\"Wallop-buttonPrevious\"\u003ePrevious\u003c/button\u003e\n  \u003cbutton class=\"Wallop-buttonNext\"\u003eNext\u003c/button\u003e\n\u003c/div\u003e\n```\n\n\u003e**#protip**\u003cbr\u003e\n\u003eYou can set the starting slide with a `.Wallop-item--current` class.\n\n## Adding animations\nWallop has no animations by default, so if you want to animate the slides, you need to extend the default `.Wallop` class with an animation modifier and include the respective CSS into your HTML.\u003cbr\u003e\n\nI have created a few basic animations which are ready for you to use out-of-the-box, you will find them in the `/css` directory.\n\n### Including animation CSS\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"path/to/wallop.css\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"path/to/wallop-animation.css\"\u003e\n\u003c/head\u003e\n```\n\n### Extending with modifier\n```html\n\u003cdiv class=\"Wallop Wallop--fade\"\u003e\n...\n\u003c/div\u003e\n```\n\n### Available animations\nHere's a list of the available animation modifiers ready for you to use\n- `Wallop--slide`\n- `Wallop--fade`\n- `Wallop--scale`\n- `Wallop--rotate`\n- `Wallop--fold`\n- `Wallop--vertical-slide`\n\n\u003e **protip**\u003cbr\u003e\n\u003e These animation helpers are especially helpful using if you are using wallop as a slider, but don't feel forced to use them, instead, feel free to take advantage of the classes wallop provides you with, and create you own!\n\n## Options\nHere's a list of options you can pass to Wallop\n- `buttonPreviousClass: 'Wallop-buttonPrevious'`\n- `buttonNextClass: 'Wallop-buttonNext'`\n- `itemClass: 'Wallop-item'`\n- `currentItemClass: 'Wallop-item--current'`\n- `showPreviousClass: 'Wallop-item--showPrevious'`\n- `showNextClass: 'Wallop-item--showNext'`\n- `hidePreviousClass: 'Wallop-item--hidePrevious'`\n- `hideNextClass: 'Wallop-item--hideNext'`\n- `carousel: true`\n\n## API\nWallop offers a basic API for you to use, so you can control it from your own buttons or gestures.\n\n### goTo(index)\nThis allows you to go to a specific slide index.\n```js\nvar slider = document.querySelector('.Wallop');\nvar Wallop = new Wallop(slider);\n\n// Go to 2nd slide\nWallop.goTo(1);\n```\n\u003e **#protip**\u003cbr\u003e\n\u003e index starts at 0 👌\n\n### next()\nThis allows you to go to the next slide\n```js\nvar slider = document.querySelector('.Wallop');\nvar Wallop = new Wallop(slider);\n\n// Go to next slide\nWallop.next();\n```\n\n### previous()\nThis allows you to go to the previous slide\n```js\nvar slider = document.querySelector('.Wallop');\nvar Wallop = new Wallop(slider);\n\n// Go to previous slide\nWallop.previous();\n```\n\n### reset()\nThis resets all internal variables of Wallop. Useful when dynamically changing the\nnumber of items in your slider.\n```js\nvar slider = document.querySelector('.Wallop');\nvar Wallop = new Wallop(slider);\n\n// Some function that will dynamically\n// insert new itmes in Wallop\ninsertNewItems();\n\n// Reset config\nWallop.reset();\n```\n\n## Events\nWallop dispatches a Custom Event every time a slide changes, and it returns a `detail` object which contains the current slide index and the element you initiated Wallop with.\n\n### Listening to a slide change\n```js\nvar slider = document.querySelector('.Wallop');\nvar Wallop = new Wallop(slider);\nvar handler = function(event) {\n  // event.detail.wallopEl\n  // =\u003e \u003cdiv class=\"Wallop\"\u003e…\u003c/div\u003e\n\n  // event.detail.currentItemIndex\n  // =\u003e number\n};\n\n// Listen to the handler\nWallop.on('change', handler);\n\n// Remove the handler listener\nWallop.off('change', handler);\n```\n\n## Real life examples\n- **[Google](http://www.google.com/trends/worldcup)** – uses wallop as a slideshow, transitioning the background colour and animating the hero image of each item\n- **[Warp](http://warp.net/news/afx-following-global-premieres-you-can-now-hear-4-tracks-from-the-ep/?o=gallery\u0026index=0)** – uses the power of wallop's API and Custom Events to control the items via the URL and to build a custom pagination\n- **[Strava Insights](http://insights.strava.com/)** – uses wallop a a slideshow, transitioning and transforming the background images with delay\n\nIf you are using wallop, please do let  me know by [creating an issue](https://github.com/peduarte/wallop/issues) and I'll make sure to add it to this list 👊\n\n## Limitations\nDue to its simplicity, wallop has a few limitations. For example, it is not possible to have the slide position animation based on gesture, or it's not possible to include physics based animations based on gesture momentum.\n\nIf you want a slider which provides all these options, I highly recommend David Desandro's [Flickity](http://flickity.metafizzy.co/).\n\n## Contributing\nPlese see [CONTRIBUTING.md](https://github.com/peduarte/wallop/blob/master/CONTRIBUTING.md) for more information.\n\n## Licensing\nMIT © 2018 [Pedro Duarte](http://pedroduarte.me)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeduarte%2Fwallop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeduarte%2Fwallop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeduarte%2Fwallop/lists"}