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