# col-slider

> slide image or content block in frame divided by column around the center view

Latest version **1.2.0** (published 2022-01-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install col-slider
pnpm add col-slider
yarn add col-slider
bun add col-slider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2022-01-01 |
| First published | 2021-12-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dainb_ |
| Maintainers | dainb_ |
| Keywords | slide, slide images, column, col-slide, slide column style, slider, column view slider, slider horizontal |

## Links

- npm: https://www.npmjs.com/package/col-slider
- npm.io page: https://npm.io/package/col-slider

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.2.0 (latest) — 2022-01-01
- 1.1.2 — 2021-12-24
- 1.1.1 — 2021-12-24

## README

### The package is present images by slide image in frame divided by column around the center view
   ![test col-slider package](https://live.staticflickr.com/65535/51761145941_091d74543c.jpg)
### Usage    
1. import { colSlider } from "col-slider"
2. Get array image
    ```
    const images = [{src: "img url"}]
    ```
    i. Item is object has src property
3. call function with important params then set parent element use class name or id
    ```
    colSlider({
        slides: images
    }).append('.parentClassName');
    ```
4. In web application: User can click/touch down and drag horizontal to move on the left/right
5. Happy codding!!!

> Demo in React app
```
import React, { useState, useEffect } from 'react';
import './App.css';
import { colSlider } from 'col-slider';

function App() {
    return (
        <div className="App">
        <header className="App-header">
            <MainBody />
        </header>
        </div>
    );
}

export default App;

function MainBody() {
    useEffect(() => {
        const imgs = [
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' }
        ];
        colSlider({
        slides: imgs,
        mainWidth: '75%' //, viewWidth: 800
        }).append('.dnbBody');
    });
    return (
        <div className="dnbBody">
        <h2>Dainb demo col-slider</h2>
        </div>
    );
}

```

> Version 1.2.0 - output active index in function onDragEnd
```
//import React, { useState, useEffect } from 'react';
function MainBody() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const imgs = [
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' },
            { src: 'https://live.staticflickr.com/65535/51728456656_7e4105ffc0.jpg' }
        ];
    colSlider({
      slides: imgs, 
      mainWidth: '75%'
    }).append('.dnbBody').onDragEnd(function(_index){
      setIndex(_index);
    });
  });
  return (
    <div className="dnbBody">
      {console.log(index)}
      <h2>Dainb demo col-slider</h2>
    </div>
  );
}
```

[![Demo col-slider in React App](https://img.youtube.com/vi/G27LJT9HlbA/0.jpg)](https://www.youtube.com/watch?v=G27LJT9HlbA)

### Source code [Github/col-slider](https://github.com/front-end-2021/npm-pkg/tree/main/col-slider)

##### The version 1.2.0 (output active index in function onDragEnd)
##### The version 1.1.2 (allow mainWidth undefined)
##### The version 1.1.1 (mainWidth is string or number)

---
_Source: https://npm.io/package/col-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._