gallery-ar-component

'gallery-ar-component' is a customizable, lightweight library for creating a responsive image gallery carousel. It is designed to be easy to use and integrate into your project with minimal setup.

Table of contents

• Carousel Component Library
  • Examples (more are coming)
  • Table of contents
  • Installation
  • Usage
  • Properties
  • License

Examples

1. Image carousel
2. Video carousel

Installation

gallery-ar-component

To install and set up the library, run:

$ npm install gallery-ar-component

Usage

import { CarouselComponent } from 'gallery-ar-component';

Pass data for each TAB in the format below:

const tabsData = [
  {
    tabLabel: 'yourTabLabelName',
    color: 'color',
    image:
      'https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80',
    text: 'Your text',
  },
  {
    tabLabel: 'yourTabLabelName',
    color: '#212121',
    video:
      'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    text: 'Your text',
  },
  ...
];

Tabs Data accepts:

| Name | Type | | ---------------------------- | ------------------------------- | | tabLabel | string | | color | string | | image | string | | video | string | | text | string | | htmlContent | string | | imgHorizontalPoint | string: 'left','center','right' | | imgVerticalPoint | string: 'top','center','bottom' | | imgHorizontalPointMobile | string: 'left','center','right' | | imgVerticalPointMobile | string: 'top','center','bottom' | | component | Ex.: component: nameOfComponent |

Example:

<CarouselComponent
  tabsData={tabsData}
  width={50}
  height={60}
  navigationPosition={'bottom'}
  dotSize={4}
  dotMargin={1}
/>

Properties

• Dimentions of the carousel

  | Properties | Requirement | Variations | Description | | ---------------------- | ----------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | tabsData | Required | format displayed above - Usage | Data for each tab to display. | | width | Required | number | Width of the Gallery in vw. | | height | Required | number | Height of the Gallery in vh. | | mobileWidth | | number | Width in the mobile version in vw. If it not provided then it will use the desk width width. | | mobileHeight | | number | Height in the mobile version in vh_. If it not provided then it will use the desk height height. | | borderRadius | | number | Border radius of the gallery in px. | | mobileBorderRadius | | number | Mobile border radius in px. Accepts values from 1 and greater. If 0 provided it will take the desk border radius. |

• Navigation

  • Dot Navigation

    | Properties | Requirement | Variations | Description | | ------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | navigation | | boolean | Show dot navigation. | | navigationPosition | | 'bottom', 'bottom-left','bottom-right', 'top', 'top-left', 'top-right', 'left', 'left-top', 'left-bottom','right', 'right-top', 'right-bottom' | Navigation Position. | | dotSize | | number | Size of dot navigation buttons in px. | | mobileDotSize | | number | Mobile size of dot nav.igation buttons in px. If not provided then it will use desk dot size. | | dotColor | | hex color, string | Color of dot buttons | | dotColorHover | | hex color, string | Color of dot buttons on hover/focus. | | dotColorActive | | hex color, string | Color of active dot button. | | dotRadius | | number | Radius of dot buttons. | | dotMargin | | string | Margin around the buttons in vw. Ex.: '1 2 1 2' (top, right, bottom, and left), '1' is 1vw on top, bottom, 2vw on left and right. | | dotMarginMobile | | string | Margin around the buttons in mobile in vw. Ex.: '1 2 1 2' (top, right, bottom, and left), '1' is 1vw on top, bottom, 2vw on left and right. | | dotBorder | | number | Border width for dot navigation in px. | | dotBorderColor | | hex color, string | Color of the border. | | navigationBorder | | boolean | True if to include border. | | navigationBorderSize | | number | Size of the navigation box in px. Only for top, bottom, left and right alighnment. NOT for top-left, etc. | | navigationBorderColor | | hex color, string | Color of the navigation box. |

  • Arrow Navigation

    | Properties | Requirement | Variations | Description | | ------------------------------ | ----------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | arrowNavigation | | boolean | Show arrow navigation. If true two arrows appear to switch tabs back and forward. | | arrowButtonsBorder | | boolean | True if to include arrow button borders. | | arrowButtonsBorderSize | | number | Size of the arrow buttons box in px. | | arrowButtonsColor | | hex color, string | Color of the navigation box. | | arrowButtonBorderRadius | | number | Radius of arrow button. | | arrowButtonSize | | string | Padding around the arrow buttons in px. Ex.: '1 2 1 2' (top, right, bottom, and left), '1' is 1px on top, bottom, 2px on left and right. Other example '1 2' is 1px 2px. | | arrowButtonMargin | | string | Margin around arrow button in px. Ex.: '1 2 1 2' (top, right, bottom, and left), '1' is 1px on top, bottom, 2px on left and right. Other example '1 2' is 1px 2px. | | arrowButtonBackgroundColor | | hex color, string | Color of the arrow button background. | | arrowColor | | hex color, string | Arrow icon color. |

• Content

  | Properties | Requirement | Variations | Description | | --------------------------- | ----------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | textPosition | | 'left-center', 'center, 'right-center', 'top-center', 'bottom-center' | Position of text | | contentDirection | | 'row', 'column' | Direction of content if dataTabs contains text and html content. | | textWidth | | number | Width of the text(it includes text/hmtl/component content) content in vw. | | textHeight | | number | Height of the text(it includes text/hmtl/component content) content in vh. | | mobileTextWidth | | number | Width of the text(it includes text/hmtl/component content) content in vw. | | mobileTextHeight | | number | Height of the text(it includes text/hmtl/component content) content in vh. | | textContentWidth | | number | Regular Text content width in vw. | | textContentDisplay | | 'flex', 'grid' | How to display the content | | gridGap | | number | For the grid content display to add columns and rows gap if there is a need in px. | | numberGridColumns | | number | Number of columns for grid | | mobileNumberGridColumns | | number | Mobile number of grid columns | | fontSize | | number | Size of the font in px. | | mobileFontSize | | number | Mobile size of the font in px. | | contentBorder | | boolean | True if to include content border. | | contentBordersColor | | hex color, string | Color of border of content box. | | contentBordersSize | | number | Width of border of content box. |

• Mask Images

  | Properties | Requirement | Variations | Description | | ----------------------- | ----------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | splitImageAlignment | | 'top', 'bottom', 'left', 'right' | Mask image alignment. | | tearFile | | string | Import image .png as import nameYourImage from path/imageFile.png in your component and insert into <CarouselComponent tearFile={nameYourImage}/>. Example of image please take in the src/Carousel/images file. | | widthOfMask | | number | Width of the mask. Available for 'left' and 'right mask currently. |

• Background position (Ex.: image, video)

  | Properties | Requirement | Variations | Description | | ---------------------- | ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | | backgroundPosition | | string | Background(image) position. Ex.:top 20px right 30px. First value is top/bottom, second value right/left and px number. |

Author

Alyona Rodina

• github/alyonarodina

License

Copyright © 2022, Alyona Rodina. Released under the MIT License.