https://github.com/code0wl/canvas-slider

A drag slide purely based in canvas
https://github.com/code0wl/canvas-slider

Last synced: 19 days ago
JSON representation

A drag slide purely based in canvas

• Host: GitHub
• URL: https://github.com/code0wl/canvas-slider
• Owner: code0wl
• License: other
• Created: 2015-11-14T05:00:59.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-05T05:15:42.000Z (about 9 years ago)
• Last Synced: 2024-04-14T07:23:47.938Z (9 months ago)
• Language: JavaScript
• Size: 49.8 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: license.md

Awesome Lists containing this project

README

        
#Canvas slider [![Build Status](https://travis-ci.org/code0wl/canvas-slider.svg)](https://travis-ci.org/code0wl/canvas-slider)

A free canvas slider to be used with remote or local data.

Use when speed is absolutely a necessity! Also works on mobile.

###Features

- image fetch api

- image to canvas convertion

- documented code coverage

- modern buildstreet

- Image aspect ratio resize

- horizontal scroll

- vertical scroll

- map events to canvas coordinates

- linting

- Mobile (optimised for touch support)

- !deadzone scrolling

- no libs, clean ES2015 (w/babel)

###Feature pipeline

- import image by dragging and dropping in the strip

- select image to modify

- add effects to image

- crop image

- rotate image

- force scroll with physics and momentum

###usage

Checkout the project from this github repo

    

    cd canvas-slider

    npm i 

    gulp serve

    

    

###api

    document.addEventListener('DOMContentLoaded', function() {

        var dcDogs = new CanvasSlider({

            element: '.js-slider',

            direction: 'horizontal',

            data: '/data/dcdogs.json',

            dimensions: {

                width: '600',

                height: '400'

            }

        });

    });

    

    

    

    document.addEventListener('DOMContentLoaded', function() {

            var dcDogs = new CanvasSlider({

                element: '.js-slider',

                direction: 'vertical',

                data: '/data/dcdogs.json',

                dimensions: {

                    width: '600',

                    height: '400'

                }

            });

        });

    

    

###additional

Enter the following for a list of build tasks

    

    gulp help