4.4.1 • Published 5 months ago

@hawk-ui/carousel v4.4.1

Weekly downloads
274
License
MIT
Repository
-
Last release
5 months ago

Installation

To install a component run

$ npm install @hawk-ui/carousel --save

Please import CSS styles via

@import '/path__to__node_modules/@hawk-ui/carousel/dist/index.min.css

Usage

Contained carousel:

Demo

import Carousel from '@hawk-ui/carousel';
initialState = {
  slides: [
    <div
      style={{
        height: '250px',
        width: '100%',
        flex: '0 0 100%',
        backgroundColor: 'lavender',
      }}
    />,
    <div
      style={{
        height: '250px',
        width: '100%',
        flex: '0 0 100%',
        backgroundColor: 'lavenderblush',
      }}
    />,
    <div
      style={{
        height: '250px',
        width: '100%',
        flex: '0 0 100%',
        backgroundColor: 'lavender',
      }}
    />,
    <div
      style={{
        height: '250px',
        width: '100%',
        flex: '0 0 100%',
        backgroundColor: 'lavenderblush',
      }}
    />,
  ],
};

<Carousel
  id="carousel1"
  slides={state.slides}
  options={{
    display: 1,
    width: 100,
  }}
/>

Card carousel:

Demo

import Carousel from '@hawk-ui/carousel';
initialState = {
  slides: [
    <div
      style={{
        height: '250px',
        width: '400px',
        flex: '0 0 400px',
        backgroundColor: 'lavender',
      }}
    />,
    <div
      style={{
        height: '250px',
        width: '400px',
        flex: '0 0 400px',
        backgroundColor: 'lavenderblush',
      }}
    />,
    <div
      style={{
        height: '250px',
        width: '400px',
        flex: '0 0 400px',
        backgroundColor: 'lavender',
      }}
    />,
    <div
      style={{
        height: '250px',
        width: '400px',
        flex: '0 0 400px',
        backgroundColor: 'lavenderblush',
      }}
    />,
  ],
};

<Carousel
  id="carousel2"
  slides={state.slides}
  variant="card"
  options={{
    display: 2,
    width: 400,
  }}
/>

Poster carousel:

Demo

import Carousel from '@hawk-ui/carousel';
initialState = {
  header: [
    'https://www.w3schools.com/howto/img_nature_wide.jpg',
    'https://www.w3schools.com/howto/img_snow_wide.jpg',
    'https://www.w3schools.com/howto/img_mountains_wide.jpg',
  ],
  slides: [
    <div
      style={{
        height: '250px',
        width: '100%',
        flex: '0 0 100%',
      }}
    >
      <img
        src="https://www.w3schools.com/howto/img_nature_wide.jpg"
        style={{
          height: '100%',
          width: '100%',
          objectFit: 'cover',
        }}
      />
    </div>,
    <div
      style={{
        height: '250px',
        width: '100%',
        flex: '0 0 100%',
      }}
    >
      <img
        src="https://www.w3schools.com/howto/img_snow_wide.jpg"
        style={{
          height: '100%',
          width: '100%',
          objectFit: 'cover',
        }}
      />
    </div>,
    <div
      style={{
        height: '250px',
        width: '100%',
        flex: '0 0 100%',
      }}
    >
      <img
        src="https://www.w3schools.com/howto/img_mountains_wide.jpg"
        style={{
          height: '100%',
          width: '100%',
          objectFit: 'cover',
        }}
      />
    </div>,
  ],
};

<Carousel
  id="carousel3"
  slides={state.slides}
  header={state.header}
  panes={[]}
  variant="poster"
  options={{
    display: 1,
    width: 100,
  }}
/>
4.4.1

5 months ago

4.4.0

6 months ago

4.3.4

7 months ago

4.3.3

7 months ago

4.3.9

6 months ago

4.3.6

7 months ago

4.3.5

7 months ago

4.3.8

6 months ago

4.3.7

7 months ago

4.1.8

1 year ago

4.1.7

1 year ago

4.1.9

1 year ago

4.3.2

1 year ago

4.3.1

1 year ago

4.3.0

1 year ago

4.2.3

1 year ago

4.2.2

1 year ago

4.2.5

1 year ago

4.2.4

1 year ago

4.2.1

1 year ago

4.2.0

1 year ago

4.2.7

1 year ago

4.2.6

1 year ago

4.2.9

1 year ago

4.2.8

1 year ago

4.1.6

2 years ago

4.1.5

2 years ago

4.0.5

2 years ago

4.0.4

2 years ago

4.0.7

2 years ago

4.0.6

2 years ago

4.0.9

2 years ago

4.0.8

2 years ago

4.1.4

2 years ago

4.1.3

2 years ago

4.1.0

2 years ago

4.1.2

2 years ago

4.1.1

2 years ago

4.0.3

3 years ago

4.0.1

3 years ago

4.0.2

3 years ago

3.1.9

3 years ago

3.1.8

3 years ago

4.0.0

3 years ago

3.1.7

3 years ago

3.1.5

3 years ago

3.1.4

3 years ago

3.1.3

3 years ago

3.1.2

3 years ago

3.1.1

3 years ago

3.1.0

3 years ago

3.0.9

3 years ago

3.0.8

3 years ago

3.0.7

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.13.2

4 years ago

2.13.0

4 years ago

2.13.1

4 years ago

2.12.9

4 years ago

2.12.7

4 years ago

2.12.8

4 years ago

2.12.10

4 years ago

2.12.5

4 years ago

2.12.6

4 years ago

2.12.4

4 years ago

2.12.3

4 years ago

2.12.2

4 years ago

2.12.1

4 years ago

2.11.9

4 years ago

2.11.8

4 years ago

2.11.7

4 years ago

2.11.6

4 years ago

2.11.5

4 years ago

2.11.4

4 years ago

2.11.3

4 years ago

2.11.2

4 years ago

2.11.0

4 years ago

2.11.1

4 years ago

2.10.9

4 years ago

2.10.7

4 years ago

2.10.8

4 years ago

2.10.5

4 years ago

2.10.6

4 years ago

2.10.1

4 years ago

2.10.0

4 years ago

2.9.9

4 years ago

2.9.6

4 years ago

2.9.8

4 years ago

2.9.5

4 years ago

2.9.4

4 years ago

2.9.3

4 years ago

2.9.2

4 years ago

2.9.1

4 years ago

2.9.0

4 years ago

2.8.9

4 years ago

2.8.8

4 years ago

2.8.7

4 years ago

2.8.6

4 years ago

2.8.5

4 years ago

2.8.4

4 years ago

2.8.3

4 years ago

2.8.2

4 years ago

2.8.1

4 years ago

2.7.9

4 years ago

2.8.0

4 years ago

2.7.6

4 years ago

2.7.8

4 years ago

2.7.7

4 years ago

2.7.5

4 years ago

2.7.4

4 years ago

2.7.3

4 years ago

2.7.2

4 years ago

2.7.1

4 years ago

2.6.8

4 years ago