1.15.0 • Published 3 months ago

fullpage-image-slider v1.15.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

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 :

backgroundImagetypedescription
imagesarray{id:1 , src: "1.jpg"}
textsarray{id:1 , text: "text"}
logopicture pathimg file
videosarray{id:1 , src: "1.mp4"}
imageDurationtime(number)10000
textDurationtime(number)20000
videoDurationtime(number)25000
showDateBoolean{true}
showTimeBoolean{true}
logoStyleobject{{ color: "red" }}
footerStyleobject{{ color: "red" }}
textmessageobject{{ color: "red" }}
timeStyleobject{{ color: "red" }}
dateStyleobject{{ color: "red" }}
textStyleobject{{ color: "red" }}
messageClassNamestring"some-css-change"
messageboxClassNamestring"some-css-change"
dateTimeClassNamestring"some-css-change"
logoclassNamestring"some-css-change"
boxfooterclassNamestring"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;