diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..5444a4c --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,49 @@ +## Contributing + +Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project. + +If you are making a significant change, please open an issue before creating a pull request. This will allow us to discuss the design and implementation. + +Make sure your request is meaningful and you have tested the app locally before submitting a pull request. + +### Installing Requirements + +#### Requirements + +- NodeJS +- NPM + +### Clone the repository + +``` +git clone https://github.com/DenverCoderOne/siema.git +cd siema +``` + +### Installing dependencies + +```bash +npm ci +``` + +### Build locally + +```bash +npm run dev +``` + +### Build the /dist directory + +```bash +npm run build +``` + +### Linting + +```bash +# to check for linting errors +npm run lint + +# to fix linting errors +npm run fix +``` diff --git a/README.md b/README.md index feeba40..b363f0a 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # Siema - Lightweight and simple carousel with no dependencies -This is a maintained fork of [Siema](https://github.com/pawelgrzybek/siema) by [Pawel Grzybek](https://github.com/pawelgrzybek). +This is a maintained fork of [Siema](https://github.com/pawelgrzybek/siema) by [Paweł Grzybek](https://github.com/pawelgrzybek). Full docs with examples: [https://denvercoderone.github.io/siema/](https://denvercoderone.github.io/siema/). -Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. As Brad Frost once said "do that shit yourself". It is 100% open source and [available on Github](https://github.com/DenverCoderOne/siema). It is free to use on personal and commercial projects. Use it with your favourite module bundler or by manually injecting the script into your project. +Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. As Brad Frost once said, "do that shit yourself". It is 100% open source and [available on GitHub](https://github.com/DenverCoderOne/siema). It is free to use on personal and commercial projects. Use it with your favorite module bundler or by manually injecting the script into your project. ## Installation @@ -26,7 +26,7 @@ yarn add siema ``` ```js -import Siema from 'siema'; +import Siema from "siema"; new Siema(); ``` @@ -45,9 +45,9 @@ Siema comes with a few (optional) settings that you can change by passing an obj ```js new Siema({ - selector: '.siema', + selector: ".siema", duration: 200, - easing: 'ease-out', + easing: "ease-out", perPage: 1, startIndex: 0, draggable: true, @@ -61,13 +61,13 @@ new Siema({ ``` **`selector`** (string or DOM element) -The selector to use as a carousel. Siema will use all immediate children of this selector as a slider items. It can be a query string [(example)](http://codepen.io/pawelgrzybek/pen/QvLjxY) or DOM element [(example)](http://codepen.io/pawelgrzybek/pen/gWYaje). +The selector to use as a carousel. Siema will use all immediate children of this selector as slider items. It can be a query string [(example)](http://codepen.io/pawelgrzybek/pen/QvLjxY) or a DOM element [(example)](http://codepen.io/pawelgrzybek/pen/gWYaje). **`duration`** (number) Slide transition duration in milliseconds [(example)](http://codepen.io/pawelgrzybek/pen/BRBoqO). **`easing`** (string) -It is like a CSS `transition-timing-function` — describes acceleration curve [(example)](http://codepen.io/pawelgrzybek/pen/aWovrB). +Like a CSS `transition-timing-function`, it describes the acceleration curve [(example)](http://codepen.io/pawelgrzybek/pen/aWovrB). **`perPage`** (number or object) The number of slides to be shown. It accepts a number [(example)](http://codepen.io/pawelgrzybek/pen/bWbVXz) or an object [(example)](http://codepen.io/pawelgrzybek/pen/dWbGyZ) for complex responsive layouts. @@ -101,16 +101,16 @@ Runs after slide change [(example)](http://codepen.io/pawelgrzybek/pen/RVbrVe). As mentioned above, Siema doesn't come with many options - just a few useful methods. Combine it with some very basic JavaScript and voila! **`prev(howManySlides = 1, callback)`** -Go to previous item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide few items backward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW). +Go to the previous item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide a few items backward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW). **`next(howManySlides = 1, callback)`** -Go to next item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide few items forward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW). +Go to the next item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide a few items forward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW). **`goTo(index, callback)`** -Go to item at particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/gWYLXP). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/ZKzBvo). +Go to an item at a particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/gWYLXP). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/ZKzBvo). **`remove(index, callback)`** -Remove item at particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/BRBpQJ). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmBjjE). +Remove an item at a particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/BRBpQJ). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmBjjE). **`insert(item, index, callback)`** Insert new `item` (DOM element) at specific `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/QvLdaJ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/vmBgdZ). @@ -119,10 +119,10 @@ Insert new `item` (DOM element) at specific `index` (number) [(example)](http:// Prepend new `item` (DOM element) [(example)](http://codepen.io/pawelgrzybek/pen/rmBymW). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/LyPWLe). **`append(item, callback)`** -Append new `item` (DOM element) [(example)](http://codepen.io/pawelgrzybek/pen/RVbpZe). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmByGj). +Append a new `item` (DOM element) [(example)](http://codepen.io/pawelgrzybek/pen/RVbpZe). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmByGj). **`destroy(restoreMarkup = false, callback)`** -Remove all event listeners on instance [(example)](http://codepen.io/pawelgrzybek/pen/oWvZEd). Use `restoreMarkup` to restore the initial markup inside selector [(example)](http://codepen.io/pawelgrzybek/pen/ZKzeoL). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/Wjepyv). +Remove all event listeners on the instance [(example)](http://codepen.io/pawelgrzybek/pen/oWvZEd). Use `restoreMarkup` to restore the initial markup inside the selector [(example)](http://codepen.io/pawelgrzybek/pen/ZKzeoL). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/Wjepyv). **`currentSlide`** Prints current slide index [(example)](https://codepen.io/pawelgrzybek/pen/XRNOPP). @@ -139,6 +139,8 @@ Prints current slide index [(example)](https://codepen.io/pawelgrzybek/pen/XRNOP ## Extra & Thanks -Siema means 'hello' in Polish. When I play around with some code, I always use random names. That's the whole story behind the name of this one :) +Thanks to [Paweł Grzybek](https://github.com/pawelgrzybek) for the original [Siema](https://github.com/pawelgrzybek/siema). -Huge thanks to [Jarkko Sibenberg](http://www.sibenberg.com/) for the cute logo design! I can't thank [BrowserStack](https://www.browserstack.com) enough for giving me a free access to their testing amazing service. +> Siema means 'hello' in Polish. When I play around with some code, I always use random names. That's the whole story behind the name of this one :) + +Huge thanks to [Jarkko Sibenberg](http://www.sibenberg.com/) for the cute logo design! I can't thank [BrowserStack](https://www.browserstack.com) enough for giving me free access to their testing amazing service. diff --git a/docs/index.md b/docs/index.md index 74f6b3a..a9a5503 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,7 +2,7 @@ layout: default --- -Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. As Brad Frost once said "do that shit yourself". It is 100% open source and [available on Github](https://github.com/DenverCoderOne/siema). It is free to use on personal and commercial projects. Use it with your favourite module bundler or by manually injecting the script into your project. +Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. As Brad Frost once said, "do that shit yourself". It is 100% open source and [available on GitHub](https://github.com/DenverCoderOne/siema). It is free to use on personal and commercial projects. Use it with your favorite module bundler or by manually injecting the script into your project. Download Siema from Github @@ -75,13 +75,13 @@ new Siema({ ``` **`selector`** (string or DOM element) -The selector to use as a carousel. Siema will use all immediate children of this selector as a slider items. It can be a query string [(example)](http://codepen.io/pawelgrzybek/pen/QvLjxY) or DOM element [(example)](http://codepen.io/pawelgrzybek/pen/gWYaje). +The selector to use as a carousel. Siema will use all immediate children of this selector as slider items. It can be a query string [(example)](http://codepen.io/pawelgrzybek/pen/QvLjxY) or a DOM element [(example)](http://codepen.io/pawelgrzybek/pen/gWYaje). **`duration`** (number) Slide transition duration in milliseconds [(example)](http://codepen.io/pawelgrzybek/pen/BRBoqO). **`easing`** (string) -It is like a CSS `transition-timing-function` — describes acceleration curve [(example)](http://codepen.io/pawelgrzybek/pen/aWovrB). +Like a CSS `transition-timing-function`, it describes the acceleration curve [(example)](http://codepen.io/pawelgrzybek/pen/aWovrB). **`perPage`** (number or object) The number of slides to be shown. It accepts a number [(example)](http://codepen.io/pawelgrzybek/pen/bWbVXz) or an object [(example)](http://codepen.io/pawelgrzybek/pen/dWbGyZ) for complex responsive layouts. @@ -115,16 +115,16 @@ Runs after slide change [(example)](http://codepen.io/pawelgrzybek/pen/RVbrVe). As mentioned above, Siema doesn't come with many options - just a few useful methods. Combine it with some very basic JavaScript and voila! **`prev(howManySlides = 1, callback)`** -Go to previous item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide few items backward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW). +Go to the previous item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide a few items backward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW). **`next(howManySlides = 1, callback)`** -Go to next item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide few items forward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW). +Go to the next item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide a few items forward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW). **`goTo(index, callback)`** -Go to item at particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/gWYLXP). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/ZKzBvo). +Go to an item at a particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/gWYLXP). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/ZKzBvo). **`remove(index, callback)`** -Remove item at particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/BRBpQJ). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmBjjE). +Remove an item at a particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/BRBpQJ). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmBjjE). **`insert(item, index, callback)`** Insert new `item` (DOM element) at specific `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/QvLdaJ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/vmBgdZ). @@ -133,10 +133,10 @@ Insert new `item` (DOM element) at specific `index` (number) [(example)](http:// Prepend new `item` (DOM element) [(example)](http://codepen.io/pawelgrzybek/pen/rmBymW). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/LyPWLe). **`append(item, callback)`** -Append new `item` (DOM element) [(example)](http://codepen.io/pawelgrzybek/pen/RVbpZe). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmByGj). +Append a new `item` (DOM element) [(example)](http://codepen.io/pawelgrzybek/pen/RVbpZe). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmByGj). **`destroy(restoreMarkup = false, callback)`** -Remove all event listeners on instance [(example)](http://codepen.io/pawelgrzybek/pen/oWvZEd). Use `restoreMarkup` to restore the initial markup inside selector [(example)](http://codepen.io/pawelgrzybek/pen/ZKzeoL). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/Wjepyv). +Remove all event listeners on the instance [(example)](http://codepen.io/pawelgrzybek/pen/oWvZEd). Use `restoreMarkup` to restore the initial markup inside the selector [(example)](http://codepen.io/pawelgrzybek/pen/ZKzeoL). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/Wjepyv). **`currentSlide`** Prints current slide index [(example)](https://codepen.io/pawelgrzybek/pen/XRNOPP). @@ -212,7 +212,9 @@ yarn run build ## Extra & Thanks -Siema means 'hello' in Polish. When I play around with some code, I always use random names. That's the whole story behind the name of this one :) +Thanks to [Paweł Grzybek](https://github.com/pawelgrzybek) for the original [Siema](https://github.com/pawelgrzybek/siema). + +> Siema means 'hello' in Polish. When I play around with some code, I always use random names. That's the whole story behind the name of this one :) Huge thanks to [Jarkko Sibenberg](http://www.sibenberg.com/) for the cute logo design! I can't thank [BrowserStack](https://www.browserstack.com) enough for giving me a free access to their testing amazing service.