<commit_before># just-slide

[![Flattr](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=kerwitz&url=https%3A%2F%2Fgithub.com%2Fkerwitz%2Fjust-slide)
[![Bower version](https://badge.fury.io/bo/just-slide.svg)](http://badge.fury.io/bo/just-slide)

A very simplistic pure Javascript, no-dependencies approach to a slider component.

From time to time I need to include a slider into a customers website and far too often do I end up
spending more time on setting up and tweaking a heavy jQuery slider than I really want to.
just-slide is a very basic approach to a slider component that does not require jQuery or any other
dependency.

## Basic usage
1. Grab the [current release](https://github.com/kerwitz/just-slide/releases) or install using bower:

   `bower install just-slide`

   > **Note:** the files in this repository might be unstable, please install the latest release
   > in favor over taking the files from the repository directly.
   
2. Include the needed files in your html file:

   ```html
   <!-- include the styling in the head. -->
   <link rel="stylesheet" href="lib/just-slide/css/just-slide.min.css">
   <!-- include the Javascript in the body. -->
   <script src="lib/just-slide/js/just-slide.min.js"></script>
   ```
3. Mark up your slider:

   ```html
   <section id="slider">
       <button>&larr; Previous child</button>
       <button>Next child &rarr;</button>
       <div>
           <article>First child here.</article>
           <article>Second child here.</article>
       </div>
   </section>
   ```
4. Initiate just-slide:

   ```js
   var slider = document.getElementById( 'slider' ),
       buttons = slider.getElementsByTagName( 'button' ),
       slider_identifier = justSlide.make.slider( slider );
   justSlide.make.leftNavigationButton( buttons[ 0 ], slider_identifier );
   justSlide.make.rightNavigationButton( buttons[ 1 ], slider_identifier );
   ```

## Advanced usage

### Compatibilities

just-slide is fully AMD (e.g. requireJS) and commonJS compatible but works just well without them.
If no require or define functions are found the justSlide object gets exposed in the global scope
for you to use, or else it registers itself as an AMD or commonJS module and can be loaded just like
you are used to:

#### Global scope
```js
// justSlide object resides in the global scope.
var slider_identifier = justSlide.make.slider( document.getElementById( 'slider' ) );
```

#### AMD
```js
requirejs( [ 'justSlide' ], function( justSlide ) {
 var slider_identifier = justSlide.make.slider( document.getElementById( 'slider' ) );
});
```

#### CommonJS
```js
var justSlide = require( './justSlide' ),
 slider_identifier = justSlide.make.slider( document.getElementById( 'slider' ) );
```

### Styling
By default just-slide applies very little styling to your elements, it will only float the children,
make their parent container absolutely positioned and add `overflow:hidden` to the section. The
height of the slider will be set on each slide based on the height of the currently visible child.
The width of the children wrapper and each children are calculated based on the number of children.
You may style all elements to your liking. Have a look at the `css\themes\` folder for some inspiration.
You can use CSS transforms to animate the slide effect and / or the height adjustment.

#### CSS classes used by just-slide
| Class            | Element | Description                                                                                          |
|------------------|---------|------------------------------------------------------------------------------------------------------|
| `just-slide`     | slider  | Applied to the slider once it gets enhanced through `justSlide.make.slider()`.                       |
| `at-first-child` | slider  | just-slide will apply this class to the container if there are no previous children to navigate to.  |
| `at-last-child`  | slider  | just-slide will apply this class to the container if there are no following children to navigate to. |

### Navigating within the slider
You have two choices for setting up navigation controls for your slider. You may either use the
wrapper functions `justSlide.make.leftNavigationButton()` and `justSlide.make.rightNavigationButton()`
or use the `justSlide.navigate.left()`, `justSlide.navigate.right()` or `justSlide.navigate.to()`
functions directly and assign them to the events of your liking by yourself. The `justSlide.make.*`
functions will do the same but they handle the different implementations for event listeners for you.
Have a look at the public API depicted below for information about the listed methods.

### Data attributes

#### data-current-child-index (default: 0)
This attributes holds the currently visible child of the slider. It is updated whenever one of the
`justSlide.navigate.*` functions is called. Initial value defaults to `0`, so the slider will start
off at the first slide in the source. Note that counting starts at 0. You can customize at which slide the
slider should start off by providing your own value on the markup:
```html
<section id="slider" data-current-child="1">
    <!-- ... -->
</section>
```
**Warning:** do not interfere with this value after the slider has been initialized. If you need to
navigate within the slider use the `justSlide.navigate.*` functions below.

## Public API

### Make
<commit_msg>Replaced "child" with "slide" in readme<commit_after># just-slide

[![Flattr](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=kerwitz&url=https%3A%2F%2Fgithub.com%2Fkerwitz%2Fjust-slide)
[![Bower version](https://badge.fury.io/bo/just-slide.svg)](http://badge.fury.io/bo/just-slide)

A very simplistic pure Javascript, no-dependencies approach to a slider component.

From time to time I need to include a slider into a customers website and far too often do I end up
spending more time on setting up and tweaking a heavy jQuery slider than I really want to.
just-slide is a very basic approach to a slider component that does not require jQuery or any other
dependency.

## Basic usage
1. Grab the [current release](https://github.com/kerwitz/just-slide/releases) or install using bower:

   `bower install just-slide`

   > **Note:** the files in this repository might be unstable, please install the latest release
   > in favor over taking the files from the repository directly.

2. Include the needed files in your html file:

   ```html
   <!-- include the styling in the head. -->
   <link rel="stylesheet" href="lib/just-slide/css/just-slide.min.css">
   <!-- include the Javascript in the body. -->
   <script src="lib/just-slide/js/just-slide.min.js"></script>
   ```
3. Mark up your slider:

   ```html
   <section id="slider">
       <button>&larr; Previous child</button>
       <button>Next child &rarr;</button>
       <div>
           <article>First child here.</article>
           <article>Second child here.</article>
       </div>
   </section>
   ```
4. Initiate just-slide:

   ```js
   var slider = document.getElementById( 'slider' ),
       buttons = slider.getElementsByTagName( 'button' ),
       slider_identifier = justSlide.make.slider( slider );
   justSlide.make.leftNavigationButton( buttons[ 0 ], slider_identifier );
   justSlide.make.rightNavigationButton( buttons[ 1 ], slider_identifier );
   ```

## Advanced usage

### Compatibilities

just-slide is fully AMD (e.g. requireJS) and commonJS compatible but works just well without them.
If no require or define functions are found the justSlide object gets exposed in the global scope
for you to use, or else it registers itself as an AMD or commonJS module and can be loaded just like
you are used to:

#### Global scope
```js
// justSlide object resides in the global scope.
var slider_identifier = justSlide.make.slider( document.getElementById( 'slider' ) );
```

#### AMD
```js
requirejs( [ 'justSlide' ], function( justSlide ) {
 var slider_identifier = justSlide.make.slider( document.getElementById( 'slider' ) );
});
```

#### CommonJS
```js
var justSlide = require( './justSlide' ),
 slider_identifier = justSlide.make.slider( document.getElementById( 'slider' ) );
```

### Styling
By default just-slide applies very little styling to your elements, it will only float the children,
make their parent container absolutely positioned and add `overflow:hidden` to the section. The
height of the slider will be set on each slide based on the height of the currently visible child.
The width of the children wrapper and each children are calculated based on the number of children.
You may style all elements to your liking. Have a look at the `css\themes\` folder for some inspiration.
You can use CSS transforms to animate the slide effect and / or the height adjustment.

#### CSS classes used by just-slide
| Class            | Element | Description                                                                                          |
|------------------|---------|------------------------------------------------------------------------------------------------------|
| `just-slide`     | slider  | Applied to the slider once it gets enhanced through `justSlide.make.slider()`.                       |
| `at-first-slide` | slider  | just-slide will apply this class to the container if there are no previous children to navigate to.  |
| `at-last-slide`  | slider  | just-slide will apply this class to the container if there are no following children to navigate to. |

### Navigating within the slider
You have two choices for setting up navigation controls for your slider. You may either use the
wrapper functions `justSlide.make.leftNavigationButton()` and `justSlide.make.rightNavigationButton()`
or use the `justSlide.navigate.left()`, `justSlide.navigate.right()` or `justSlide.navigate.to()`
functions directly and assign them to the events of your liking by yourself. The `justSlide.make.*`
functions will do the same but they handle the different implementations for event listeners for you.
Have a look at the public API depicted below for information about the listed methods.

### Data attributes

#### data-current-slide (default: 0)
This attributes holds the currently visible child of the slider. It is updated whenever one of the
`justSlide.navigate.*` functions is called. Initial value defaults to `0`, so the slider will start
off at the first slide in the source. Note that counting starts at 0. You can customize at which slide the
slider should start off by providing your own value on the markup:
```html
<section id="slider" data-current-slide="1">
    <!-- ... -->
</section>
```
**Warning:** do not interfere with this value after the slider has been initialized. If you need to
navigate within the slider use the `justSlide.navigate.*` functions below.

## Public API

### Make

{'fraction_non_alphanumeric': 0.12081460416475552, 'fraction_numerical': 0.0027520410971470506, 'mean_word_length': 3.2719435736677114, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 47, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2291479', 'n_tokens_mistral': 2956, 'n_tokens_neox': 2790, 'n_words': 1243}