Description

An image - video ( youtube ) slider component for React.js
KzuSlider is a responsive and lightweight infinite slider - carousel component for React.

Demo

See Demo: Here

Installation

npm i kzu-slider

Usage

import KzuSlider from "kzu-slider";

<KzuSlider
  slides={[
    {
      // simple image slide
      background: "imageUrl.jpeg",
      title: "Slide Title",
      subtitle: "Slide Subtitle",
      content: "Slide text content ...",
      buttons: [
        {
          title: "Single Button",
          onClick: () => {
            alert("Clicked Single Button");
          },
          color: "rgba(0,0,055,0.5)",
          textColor: "#ffffff"
        }
      ],
      contentColor: "#323232",
      contentBg: "rgba(255,255,255,0.6)",
      shades: [
        {
          from: "rgba(0, 100, 200, 0.5)",
          to: "rgba(122,234,189,0.5)",
          angle: 90
        }
      ]
    },
    {
      //youtube background
      youtubeKey: "jHbLGYBwiuo",
      //mute: false,
      videoSize: 210,
      title: "Youtube Background",
      content: "Video Background is used with zoom and shades.",
      shades: [
        {
          from: "rgba(255, 0, 255, 0.5)",
          to: "rgba(255, 255, 255, 0.5)",
          angle: 45
        }
      ]
    }
  ]}
/>

Slider Props

All props are optional, if not specified, default values will be applied.

! Parallax effect is cancelled in this release due to performance and mobile issues

height, can be "full" (string) or a number {500} representing height in px (default height is 500px ).
parallax, boolean fixed background images.
auto , boolean slider runs automatically, stops on mouse hover.
duration, number representing slide duration in ms (default is 6000).
contentPadding, object as: { left: 80, right: 80, top: 64, bottom: 64 } defines padding of the box containing text contents. ( top and bottom paddings will make the box bigger whereas left - right padding will not effect width ).
contentWidth, number ( like 75 ) representing width in % of the box containing text contents ( title, subtitle, content and buttons ).
hideArrows, boolean hides navigation arrows.
hideDots, boolean hides navigation dots.
transition, number representing transition duration in ms (default is 1000).
slides, array of objects containing information on all slides. disableTouch, boolean disables touch slide effects on mobile.

Slide properties

background, string image Url.
title, string Slide Title.
subtitle, string Slide Subtitle.
content, string Slide Text Content.
buttons, array of objects Example:

[
  {
    title: "Single Button",
    onClick: () => {
      alert("Clicked Single Button");
    },
    color: "rgba(0,0,055,0.5)",
    textColor: "#ffffff"
  }
]

contentColor, string color value like "#ffffff" or "rgba(255,255,255,0.5)" representing text color.
contentBg, string color value like "#ffffff" or "rgba(255,255,255,0.5)" representing text background box color.
shades, array of objects representing linear gradients over background image or video, Example:

 [
  {
    from: "rgba(0, 100, 200, 0.5)",
    to: "rgba(122,234,189,0.5)",
    angle: 90
  }
]

youtubeKey, string youtube key in the url of youtube video.
mute, boolean by default video is muted, enter false to get sound.
videoSize, number a number bigger than 100 ( as % ) to make the video bigger in size.

Author

Murat Yılmaz (kzutronic)

Licence

kzu-slider is licenced under MIT Licence