fullpage image slider

| fullpage image slider info : | | ---------------------------- | | description | | install info | | properties info | | example |

Description :

This package mostly used for showing image , string ,date and time, you can have array of both images and strings to show.

Also you can have array of video and play videos in the background or put background image .

Also you can put logo and name of Company in the page .

Installation :

npm i fullpage-image-slider

properties :

| backgroundImage | type | description | | ------------------- | ------------ | ----------------------- | | images | array | [{id:1 , src: "1.jpg"}] | | texts | array | [{id:1 , text: "text"}] | | logo | picture path | img file | | videos | array | [{id:1 , src: "1.mp4"}] | | imageDuration | time(number) | 10000 | | textDuration | time(number) | 20000 | | videoDuration | time(number) | 25000 | | showDate | Boolean | {true} | | showTime | Boolean | {true} | | logoStyle | object | {{ color: "red" }} | | footerStyle | object | {{ color: "red" }} | | textmessage | object | {{ color: "red" }} | | timeStyle | object | {{ color: "red" }} | | dateStyle | object | {{ color: "red" }} | | textStyle | object | {{ color: "red" }} | | messageClassName | string | "some-css-change" | | messageboxClassName | string | "some-css-change" | | dateTimeClassName | string | "some-css-change" | | logoclassName | string | "some-css-change" | | boxfooterclassName | string | "some-css-change" |

Example :

import React from "react";
import { BoxSlider } from "fullpage-image-slider";

import vid1 from "./assets/video/vid1.mp4";
import pic1 from "./assets/images/pic1.jpg";

import bg from "./bg.png";
import "./App.css";

function App() {
  const images = [
    {
      id: 1,
      src: pic1,
    },
  ];
  const texts = [
    {
      id: 1,
      text: "some text",
    },
  ];
  const activVideos = [
    {
      id: 1,
      src: vid1,
    },
  ];

  return (
    <div className="page">
      <BoxSlider
        backgroundImage={bg}
        images={images}
        texts={texts}
        logo={logo}
        videos={activVideos}
        imageDuration={10000}
        textDuration={20000}
        videoDuration={20000}
        showDate={false}
        showTime={true}
        logoStyle={{ backgroundColor: "red" }}
        footerStyle={{ backgroundColor: "red" }}
        textmessage={"salam"}
        timeStyle={{ color: "red" }}
        dateStyle={{ color: "red" }}
        textStyle={{color: "red"}}
        messageClassName="some-css-change"
        messageboxClassName="some-css-change"
        dateTimeClassName="some-css-change"
        logoclassName="some-css-change"
        boxfooterclassName="some-css-change"
      />
    </div>
  );
}
export default App;