vuivui-slider
v1.1.22
Published
vuivui-slider
Downloads
14
Readme
Hướng dẫn dùng slider
Example
Configurations
Examples :
Single Item
import {Slider} from "componnet";
const settings = {
dots: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
};
return (
<div>
<h2> Single Item</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);Multiple items
import {Slider} from "componnet";
const settings = {
dots: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1//có thể thay đổi tuỳ theo số lần lặp 1 slide
};
return (
<div>
<h2> Single Item</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);Responsive
import {Slider} from "component";
var settings = {
dots: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
return (
<div>
<h2> Responsive </h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Slider>
</div>
);
}Custom Paging
import {Slider} from "component";
const settings = {
customPaging: function(i) {
return (
<a>
<img src={`${baseUrl}/abstract0${i + 1}.jpg`} />
</a>
);
},
dots: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2>Custom Paging</h2>
<Slider {...settings}>
<div>
<img src={baseUrl + "/"} />
</div>
<div>
<img src={baseUrl + "/"} />
</div>
<div>
<img src={baseUrl + "/abstract03.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract03.jpg"} />
</div>
</Slider>
</div>
);Auto play
import {Slider} from "component";
const settings = {
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
speed: 2000,
autoplaySpeed: 2000,
cssEase: "linear"
};
return (
<div>
<h2>Auto Play</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);Custom Arrows
import {Slider} from "component";
const settings = {
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
speed: 2000,
autoplaySpeed: 2000,
cssEase: "linear",
nextArrow:()=>{ // return content
return (
<div
className={''}
style={{ display: "block", background: "red" }}
onClick={onClick}
/>
);
},
prevArrow:()=>{// return content
return (
<div
className={''}
style={{ display: "block", background: "red" }}
onClick={onClick}
/>
);
},
};
return (
<div>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);Disable Arrows
import {Slider} from "component";
const settings = {
dots: true,
disabledPrev:true,
disabledNext:true
};
return (
<div>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);Hidden Arrows
import {Slider} from "component";
const settings = {
dots: true,
hiddenPrev:true,
hiddenNext:true
};
return (
<div>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div>
);Configurations :
arrows
+ Type: Boolean
+ Default:true
+ Description: "hiện thị 2 nút next và prev"dots
+ Type: Boolean
+ Default:true
+ Description: "hiển thị phân trang slide"slidesToShow
+ Type: Number
+ Default: 3
+ Description: "slide sẽ phân tích và render theo số lượng"
slidesToScroll
+ Type: Number
+ Default: 1
+ Description: "dựa vào số lần user muốn tổng slides hiển thị bao nhiêu lần"
nextArrow
+ Type: Function
+ Default: undefined
+ Description: "điều chỉnh lại nút tiến ( đã cấu hình sự kiện)"prevArrow
+ Type: Function
+ Default: undefined
+ Description: "điều chỉnh lại nút lùi ( đã cấu hình sự kiện)"handleSlide
+ Type: Function
+ Default: undefined
+ Description: "Thực hiện khi di chuyển slide ( đã cấu hình sự kiện)"customPaging
+ Type: Function
+ Default: undefined
+ Description: "điều chỉnh lại giao diện nút phân trang slide (props [ event click, isActive])"speed
+ Type: Number
+ Default: 500
+ Description: "tốc độ lướt slide"autoplay
+ Type: Boolean
+ Default: false
+ Description: "tự động chạy slide "autoplaySpeed
+ Type: Number
+ Default: 2000
+ Description: "tốc độ tự động chạy slide "disabledPrev
+ Type: Boolean
+ Default: false
+ Description: "disable nút lùi"disabledNext
+ Type: Boolean
+ Default: false
+ Description: "disable nút tiến "hiddenPrev
+ Type: Boolean
+ Default: false
+ Description: "ẩn nút lùi "hiddenNext
+ Type: Boolean
+ Default: false
+ Description: "ẩn nút tiến "responsive
+ Type: Array<{breakpoint:Number,settings:settings}>>//settings 1 new Settings()
+ Default:
+ DESKTOP = 1024;
+ TABLET = 600;
+ MOBILE = 480;
`[{
breakpoint: ${DESKTOP},
settings: {
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
},
},
{
breakpoint: ${TABLET},
settings:
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: ${MOBILE},
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
]`
+ Description: "hiện thị giao diện slide theo từng thiết bị màn hình "Các class Liên quan
classSlideDots?: String;
classNameDots?: String;
classSlide?: String;
classPrevArrow?: String;
classNextArrow?: String;
stylePrevArrow?: Object;
styleNextArrow?: Object;