4.4.1 • Published 9 months ago

@hawk-ui/carousel v4.4.1

Weekly downloads
274
License
MIT
Repository
-
Last release
9 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

9 months ago

4.4.0

10 months ago

4.3.4

11 months ago

4.3.3

11 months ago

4.3.9

10 months ago

4.3.6

11 months ago

4.3.5

11 months ago

4.3.8

10 months ago

4.3.7

11 months ago

4.1.8

2 years ago

4.1.7

2 years ago

4.1.9

2 years ago

4.3.2

1 year ago

4.3.1

1 year ago

4.3.0

1 year ago

4.2.3

2 years ago

4.2.2

2 years ago

4.2.5

1 year ago

4.2.4

1 year ago

4.2.1

2 years ago

4.2.0

2 years 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

3 years ago

4.0.5

3 years ago

4.0.4

3 years ago

4.0.7

3 years ago

4.0.6

3 years ago

4.0.9

3 years ago

4.0.8

3 years ago

4.1.4

3 years ago

4.1.3

3 years ago

4.1.0

3 years ago

4.1.2

3 years ago

4.1.1

3 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

4 years ago

3.1.2

4 years ago

3.1.1

4 years ago

3.1.0

4 years ago

3.0.9

4 years ago

3.0.8

4 years ago

3.0.7

4 years ago

3.0.6

4 years ago

3.0.5

4 years ago

3.0.4

4 years ago

3.0.3

4 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

5 years ago

2.9.1

5 years ago

2.9.0

5 years ago

2.8.9

5 years ago

2.8.8

5 years ago

2.8.7

5 years ago

2.8.6

5 years ago

2.8.5

5 years ago

2.8.4

5 years ago

2.8.3

5 years ago

2.8.2

5 years ago

2.8.1

5 years ago

2.7.9

5 years ago

2.8.0

5 years ago

2.7.6

5 years ago

2.7.8

5 years ago

2.7.7

5 years ago

2.7.5

5 years ago

2.7.4

5 years ago

2.7.3

5 years ago

2.7.2

5 years ago

2.7.1

5 years ago

2.6.8

5 years ago