gallery-scroller v1.0.4

a light-weight React full screen gallery Scroller Component.

NEW VERSION

• automatically adapt browser window size
• rotate if you add duration field

Enjoy

Installation

npm i gallery-scroller

Demo

npm start

before that you should put your images into ./resources/demoImg or wherever path your code can catch them ,it's up to your convenience.have fun.

Usage

old version

import GalleryScroller from 'gallery-scroller';

const resourcespropsList = [{...},{...},{...},{...},{...},{...},] 
// resourcespropsList is Array about the Gallery Object.
// you can rename it to whatever you want.
const MyGalleryList = () => {
    <GalleryScroller list={resourcespropsList}/>
}

new version

• automatically adapt browser window size
• rotate if you add duration field

import SelfAdaptionGalleryScroller from 'gallery-scroller';

const resourcespropsList = [{...},{...},{...},{...},{...},{...},] 
// resourcespropsList is Array about the Gallery Object.
// you can rename it to whatever you want.
const MyGalleryList = () => {
    <SelfAdaptionGalleryScroller list={resourcespropsList}/>
}

API

CardList - Example

old version

const resourcespropsList = [{...},{...},{...},{...},{...},{...},] 

const MyGalleryList = () => {
    <GalleryScroller list={resourcespropsList}/>
}

new version

const resourcespropsList = [{...},{...},{...},{...},{...},{...},] 

const MyGalleryList = () => {
    <SelfAdaptionGalleryScroller list={resourcespropsList}/>
}

GalleryObject

CardObject - Example

old version

import Img from '../resources/demoImg/9.jpg';
{
        img: Img,
        marker: '直播',
        color: '#00b8d4',
        onClick:()=>{
            console.log('go to 7.jpg 直播 #00b8d4')
        }
}

new version

import Img from '../resources/demoImg/9.jpg';
{
        img: Img,
        marker: '直播',
        color: '#00b8d4',
        duration: 5000,
        onClick:()=>{
            console.log('go to 7.jpg 直播 #00b8d4')
        }
}