gallery-ar-component

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

• Image carousel
• 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.