ReX React UI Components Library

ReX React UI Component: rex-carousel

This project is part of ReX Design Language and it can be used to create React UI Components. For more information visit:

Github https://github.com/rakuten-rex

NPM https://www.npmjs.com/org/rakuten-rex

How it was built

1. webpack 4 (static module bundler)
2. HTML5
3. CSS3 & Sass (Normalize.css + Fork of Bootstrap project + ReX custom styles)
4. JavaScript ES6 Modules & Components based on React

How to install

npm install @rakuten-rex/[email protected] --save

What you can do

This project is a started kit, it contains the settings to start the creations of a React component and publish it to NPM.

Use it as a basement and reference for your own project and customize it as you will.

If you need a full environment to create a React Web App, try the react-create-app to get a full environment for your App or use any other started kit.

Live examples

For a complete guide of properties for React and HTML classes please visit the Storybook site:

https://rakuten-rex.github.io/rex-carousel/

JavaScript modules

React component (JavaScript + CSS Styles)

For plug and play components integration.

Example:

import Carousel from '@rakuten-rex/rex-carousel';

const items = [
  {
    id: 0,
    src:
      'https://img.travel.rakuten.co.jp/movement/yamaguchi/201907/images/cImg01.jpg',
    title: 'Sagano Bamboo Forest',
    caption: 'Located in Kyoto, Japan',
    tabName: 'Item A',
  },
  {
    id: 1,
    src:
      'https://img.travel.rakuten.co.jp/select/hokkaido/201906-2/images/149357_1.jpg',
    title: 'Sagano Bamboo Forest',
    caption: 'Located in Kyoto, Japan',
    tabName: 'Item B',
  },
  {
    id: 2,
    src:
      'https://img.travel.rakuten.co.jp/select/hokkaido/201906-2/images/104743_1.jpg',
    title: 'Sagano Bamboo Forest',
    caption: 'Located in Kyoto, Japan',
    tabName: 'Item C',
  }
];

function MyComponent() {
  return <Carousel items={items} transparency={0.24} />;
}

CSS Styles only

For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.

Example:

import '@rakuten-rex/rex-carousel/css';

function MyComponent() {
  return (
    <div class="swiper-main-container">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" role="presentation" style="background-image:url(https://picsum.photos/376/200)"
            data-itemid="0">
            <div class="carousel-backdrop" style="background:rgba(0, 0, 0, 0.24)"></div>
            <div class="carousel-item-description">
              <div class="carousel-item-title">Sagano Bamboo Forest</div>
              <div class="carousel-item-caption">Located in Kyoto, Japan</div>
            </div>
          </div>
          <div class="isActive swiper-slide" role="presentation" style="background-image:url(https://picsum.photos/376/200)"
            data-itemid="1">
            <div class="carousel-backdrop" style="background:rgba(0, 0, 0, 0.24)"></div>
            <div class="carousel-item-description">
              <div class="carousel-item-title">Sagano Bamboo Forest</div>
              <div class="carousel-item-caption">Located in Kyoto, Japan</div>
            </div>
          </div>
          <div class="swiper-slide" role="presentation" style="background-image:url(https://picsum.photos/376/200)"
            data-itemid="2">
            <div class="carousel-backdrop" style="background:rgba(0, 0, 0, 0.24)"></div>
            <div class="carousel-item-description">
              <div class="carousel-item-title">Sagano Bamboo Forest</div>
              <div class="carousel-item-caption">Located in Kyoto, Japan</div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next rex-icon chevron-right"></div>
        <div class="swiper-button-prev rex-icon chevron-left"></div>
      </div>
    </div>
  );
}

Static HTML

Add it from our CDN into your HTML template or HTML static page.

For development mode:

<!-- rex-carousel -->
<link href="https://r.r10s.jp/com/rex/rex-carousel/2.5.2/rex-carousel.development.css"
  rel="stylesheet">
<script src="https://r.r10s.jp/com/rex/rex-carousel/2.5.2/rex-carousel.development.js"></script>

For production mode:

<!-- rex-carousel -->
<link href="https://r.r10s.jp/com/rex/rex-carousel/2.5.2/rex-carousel.production.min.css"
  rel="stylesheet">
<script src="https://r.r10s.jp/com/rex/rex-carousel/2.5.2/rex-carousel.production.min.js"></script>

Example:

<div class="rex-css-style my-component">
  <div class="swiper-main-container">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" role="presentation" style="background-image:url(https://picsum.photos/376/200)"
          data-itemid="0">
          <div class="carousel-backdrop" style="background:rgba(0, 0, 0, 0.24)"></div>
          <div class="carousel-item-description">
            <div class="carousel-item-title">Sagano Bamboo Forest</div>
            <div class="carousel-item-caption">Located in Kyoto, Japan</div>
          </div>
        </div>
        <div class="isActive swiper-slide" role="presentation"
          style="background-image:url(https://picsum.photos/376/200)" data-itemid="1">
          <div class="carousel-backdrop" style="background:rgba(0, 0, 0, 0.24)"></div>
          <div class="carousel-item-description">
            <div class="carousel-item-title">Sagano Bamboo Forest</div>
            <div class="carousel-item-caption">Located in Kyoto, Japan</div>
          </div>
        </div>
        <div class="swiper-slide" role="presentation" style="background-image:url(https://picsum.photos/376/200)"
          data-itemid="2">
          <div class="carousel-backdrop" style="background:rgba(0, 0, 0, 0.24)"></div>
          <div class="carousel-item-description">
            <div class="carousel-item-title">Sagano Bamboo Forest</div>
            <div class="carousel-item-caption">Located in Kyoto, Japan</div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-next rex-icon chevron-right"></div>
      <div class="swiper-button-prev rex-icon chevron-left"></div>
    </div>
  </div>
</div>