slide-show-react-kle

Slideshow component click + swipe (mobile event)

Installation

Using npm:

npm install --save slide-show-react-kle

Node:

Import your css files or makeStyles

const makeStyles = {
    class: { // .class_randomValue { /* styles */ }
      color: 'white',
    },
    left_arrow: { // .left_arrow_ba7gh {  color: white; }
      color: 'white',
    },
    'section_wraper::after':{ //.section_wraper_ba7gh::after { /* styles */ }
    },
    '/left_arrow': { // .left_arrow { box-sizing: border-box; }
      boxSizing: 'border-box',
    },
    '?h3': { // h3 {  z-index: 9,; }
       zIndex: 9,
    },
    '/left_arrow:hover': { // .left_arrow:hover : {/* styles */}
    },
    '?a:visited': { // a:visited { /*styles */}
    },
     '@keyframes name': `{0%{tranform: translateX(10px)}, 100%{}}`,

Slideshow BanhMy

import { BanhMy } from 'slide-show-react-kle';

  const App = () => {
    return (
      <div>
        <BanhMy >
          {yourData.map((items) => (
            // your item //
          ))}
        </BanhMy>
      </div>
    );
  };
export default App;

Examplpe

Demo

const App = () => {
  const styles = {
    right_arrow: {
      color: 'white',
    },
    '/div_item': {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'relative',
    },
    '?h3': {
      fontSize: '2.5rem',
      color: 'white',
      margin: '5px 0',
    },
    '?a.a_link:visited': {
      color: '#cdcbcb',
    },
  };
  return (
    <div>
      <BanhMy style={styles}>
        {data.map((item, index) => (
          // html
        ))}
      </BanhMy>
    </div>
  );
};
export default App;

Output:

PropTypes

  time: timeOut to next slide //default 5000ms
  style: makeStlyes,
  prevBtn: change icon prev button,
  nextBtn: change icon next button,
  getActive: callback function return active value,
  disableWheel: disable whell event //defualt false

Slideshow BanhBo

Example

Demo

import { BanhMy } from 'slide-show-react-kle';

const App = () => {
  const styles = {
    ///////
  };
  return (
    <div>
      <BanhBo style={stylesBanhMy} slash="|">
        {data.map((item, index) => (
          //html, ex:
          <div key={index} className="item">
            <img className="item__img" src={item.img} alt="img"></img>
          </div>
        ))}
      </BanhBo>
    </div>
  );
};
export default App;

Output:

PropTypes

  time: timeOut to next slide //default 5000ms
  style: makeStlyes,
  prevBtn: change icon prev button,
  nextBtn: change icon next button,
  slash: //defualt '/'
  getActive: callback function return active value,
  disableWheel: disable whell event //defualt false

Slideshow BanhTieu

Example

Demo

import { BanhTieu } from 'slide-show-react-kle';

  <BanhTieu >
        {data.map((item, index) => (
          ///html
        ))}
      </BanhTieu>

PropTypes

  time: timeOut to next slide //default 5000ms
  style: makeStlyes,
  prevBtn: change icon prev button,
  nextBtn: change icon next button,
  getActive: callback function return active value,
  disableWheel: disable whell event //defualt false

Slideshow Pho

Example

Demo

import React from 'react';

import {  Pho } from 'slide-show-react-kle';
const App = () => {
  const data = [{
  {
    img: 'https://picsum.photos/1024/767',
    title: 'Slide 1',
    desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, fugiat quasi aut earum id quos quam voluptas, adipisci mollitia, voluptates dolore aperiam unde nihil. Exercitationem ipsum culpa quam maiores aliquid!',
    link: '#',
  },
  }]
  return (
      <Pho data={data} />
  );
};
export default App;

PropTypes

  data: array.isRequired,
  time: timeOut to next slide //default 5000ms
  style: makeStyles,
  prevBtn: change icon prev button,
  nextBtn: change icon next button,
  customATag: true to replace a tag , //defualt false
  textContentATag: replace text content of a tag // defualt 'View'
  disableWheel: disable whell event //defualt false

Simple Slide

You need to import the data, let try

import React from 'react'
import {SlideSimple} from 'slide-show-react-kle'

class Example extends Component {
  const images = [
{
    image: 'https://picsum.photos/1280/720',
    title: 'img1',
    name: 'image 1',
    infor:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, fugiat quasi aut earum id quos quam voluptas, adipisci mollitia, voluptates dolore aperiam unde nihil. Exercitationem ipsum culpa quam maiores aliquid',
    link: '#',
    value: 'View',
  },
  ]
  render() {
    return <SlideSimple data={images}  style={style}/>
  }
}

Simple Slide- Customize Css

You can customize css

import React from 'react'
import {SlideSimple} from 'slide-show-react-kle'

class Example extends Component {
  // add  css //
  const style = {
    carousel: {
      marginLeft: '20px',
      marginRight: '20px'
    }
    carousel_img : {
    }
  }
  const images = {
  }
  render() {
    return <SlideSimple data={images}  style={style}/>
  }
}

Slide-Picture

What is a Picture Tag ? Use them to control when your layout can be adapted at a particular viewport or device size. Import your data You can customize css, prev/next button

import React from 'react'
import {Slide} from 'slide-show-react-kle'

class Example extends Component {
  const images = [
 {
    xs: 'https://picsum.photos/576/768',
    sm: 'https://picsum.photos/768/576',
    md: 'https://picsum.photos/960/640',
    lg: 'https://picsum.photos/1024/768',
    xl: 'https://picsum.photos/1280/768',
    xxl: 'https://picsum.photos/1920/1080',
    title: 'img1',
    name: 'image 1',
    infor:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, fugiat quasi aut earum id quos quam voluptas, adipisci mollitia, voluptates dolore aperiam unde nihil. Exercitationem ipsum culpa quam maiores aliquid',
    link: '#',
    value: 'View',
  },
  ]
  render() {
    return <Slide data={images} style={...} btnPrev={...}/>
  }
}

License

MIT © phamqi