HỌC REACTJS THÔNG QUA VÍ DỤ PHẦN 7: SLIDER
Bài đăng này đã không được cập nhật trong 5 năm
Xin chào bạn đến với Học React qua ví dụ #1. Bài viết này mình sẽ thực hành React thông qua cách tạo Slideshow để trình diễn ảnh. Trong ví dụ này, mình tạo ra hai Slideshow. Cái bên trên điều khiển thủ công thông qua việc click chuột. Còn cái bên dưới được điều khiển tự động, với mỗi ảnh cách nhau 3 giây (dĩ nhiên bạn vẫn có thể điều khiển thủ công được). Nếu không có vấn đề gì thì mình bắt đầu học React qua ví dụ #1 thôi nào!
1. Khởi tạo project.
Đầu tiên, bạn tạo ra các thư mục và file như sau (bạn chỉ cần quan tâm tới thư mục /src): learn-react-by-example/ --src/.
----components/.
------slideshow/.
--------slideshow.css.
--------slideshow.js.
----images/.
----App.css.
----App.js.
----index.css.
----index.js.
----serviceWorker.js.
Trong đó:
Thư mục components: để chứa code của các Component. Bài này mình thực hành về Slideshow nên mình tạo thêm thư mục slideshow bên trong với 2 file slideshow.js và slideshow.css để định nghĩa cho component Slideshow (bài viết sau thực hành về cái khác thì mình sẽ tạo thêm thư mục vào bên trong components như này).
- Thư mục images: để chứa tất cả những ảnh mình sử dụng cho Demo.
- Các file App.css và App.js dùng để demo chính. Bên trong App.js mình sẽ sử dụng component Slideshow ở trên.
- Các file index.css, index.js và serviceWorker.js thì KHÔNG THAY ĐỔI với mọi bài thực hành.
2. Xây dựng Slideshow Component.
Nội dung file slideshow.js.
import React from 'react';
import ReactDOM from 'react-dom';
import './slideshow.css';
export default class Slideshow extends React.Component {
constructor(props) {
super(props);
/*
* State slideIndex dùng để xác định xem slide nào đang được active.
* Các ảnh sẽ được xếp chồng lên nhau, cái nào active thì hiển thị,
* Cái nào không active thì ẩn đi.
*/
this.state = {
slideIndex: 0
};
/*
* Khi sử dụng, mình sẽ truyền thuộc tính ratio, giả sử là "3:2"
* Như vậy, tỉ lệ width/height là this.ratioWH = 3 / 2
* Mình sẽ điều chỉnh các ảnh sao cho về cùng 1 kích thước.
*/
const ratioWHArray = this.props.ratio.split(":");
this.ratioWH = ratioWHArray[0] / ratioWHArray[1];
this.backward = this.backward.bind(this);
this.forward = this.forward.bind(this);
this.setSlideIndex = this.setSlideIndex.bind(this);
this.getNewSlideIndex = this.getNewSlideIndex.bind(this);
this.updateDimensions = this.updateDimensions.bind(this);
this.runAutomatic = this.runAutomatic.bind(this);
}
/*
* Tính chỉ số SlideIndex mới, với step là bước nhảy: +1 hoặc -1
* Giả sử, mình có 6 ảnh => các chỉ số lần lượt là: 0, 1, 2,...5
* Chú ý:
* Nếu đang ở chỉ số 5 mà đi về phía trước thì slideIndex = 0
* Nếu đang ở chỉ số 0 mà về sau thì slideIndex = 5
*/
getNewSlideIndex(step) {
const slideIndex = this.state.slideIndex;
const numberSlide = this.props.input.length;
let newSlideIndex = slideIndex + step;
if (newSlideIndex >= numberSlide) newSlideIndex = 0;
else if (newSlideIndex < 0) newSlideIndex = numberSlide - 1;
return newSlideIndex;
}
// Quay về ảnh phía trước, tức index giảm 1 => step = -1
backward() {
this.setState({
slideIndex: this.getNewSlideIndex(-1)
});
}
// Tiến tới ảnh phía sau, tức index tăng 1 => step = 1
forward() {
this.setState({
slideIndex: this.getNewSlideIndex(1)
});
}
// Xác định slideIndex nào sẽ được active
setSlideIndex(index) {
this.setState({
slideIndex: index
})
}
/*
* Cập nhật chiều cao cho container khi thay đổi kích thước màn hình
* Trong phần CSS, mình để container có width = 100%,
* Nên dù kéo to hay thu nhỏ thì width vẫn bằng 100%
* Nhưng chiều cao phải tính lại dựa vào width và tỉ lệ this.ratioWH
*/
updateDimensions() {
this.containerElm.style.height
= `${this.containerElm.offsetWidth / this.ratioWH}px`;
}
/*
* Nếu người dùng truyền vào thuộc tính mode = automatic
* thì Slideshow sẽ chạy tự động dựa vào interval.
* Hàm này sẽ được gọi trong mỗi lượt lặp lại
* để cập nhật slideIndex mới cho Slideshow
*/
runAutomatic() {
this.setState({
slideIndex: this.getNewSlideIndex(1)
});
}
/*
* Hàm này thuộc về React Component Lifecycle
* được gọi sau khi component này được render xong
* Trong đây, sẽ lưu lại reference cho container - this.containerElm
* Cập nhật lại chiều cao cho container - this.updateDimensions();
* Đăng ký sự kiện thay đổi kích thước - resize
* Kiểm tra nếu mode === "automatic" thì sẽ tạo mới một interval
* để thay đổi hình ảnh - this.runAutomatic()
* với giá trị timeout được truyền từ props hoặc mặc định là 5000 ms
*/
componentDidMount() {
this.rootElm = ReactDOM.findDOMNode(this);
this.containerElm = this.rootElm.querySelector(".container");
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions);
if (this.props.mode === "automatic") {
const timeout = this.props.timeout || 5000;
this.automaticInterval = setInterval(
() => this.runAutomatic(),
Number.parseInt(timeout)
);
}
}
/*
* Hàm này cũng thuộc về React Component Lifecycle -
* được gọi khi component này bị xóa khỏi màn hình
* Lúc này, mình phải hủy bỏ sự kiện khi resize
* và xóa bỏ interval đã khai bảo bên trên để tránh leak memory.
*/
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
if (this.automaticInterval) clearInterval(this.automaticInterval);
}
/*
* Giao diện của component
* với phần tử ngoài cùng mình để className="lp-slideshow"
* để tránh xung đột về tên với các component khác
*/
render() {
return (
<div className="lp-slideshow">
<div className="container">
{
this.props.input.map((image, index) => {
return (
<div
key={index}
className={
`slide ${this.state.slideIndex === index ? "active" : ""}`
}
>
<div className="number-text">
{`${index + 1} / ${this.props.input.length}`}
</div>
<img className="image" src={image.src} alt={image.caption} />
<div className="caption-text">{image.caption}</div>
</div>
)
})
}
<span className="prev" onClick={this.backward}>❮</span>
<span className="next" onClick={this.forward}>❯</span>
</div>
<div className="dot-container">
{
this.props.input.map((_, index) => {
return (
<span
key={index}
className={
`dot ${this.state.slideIndex === index ? "active" : ""}`
}
onClick={() => this.setSlideIndex(index)}
>
</span>
)
})
}
</div>
</div>
);
}
}
Nội dung file slideshow.css.
File này dùng để xác định style cho Slideshow component. Bạn chú ý là mọi thành phần mình đều để trong class .lp-slideshow để đảm bảo không bị xung đột với các component khác (khi kết hợp các component lại với nhau). Ngoài ra, mình sử dụng CSS selector là >. Với ý nghĩa, ví dụ khi mình dùng element1 > element2 thì hiểu là style này được áp dụng cho element2 là con trực tiếp của element1 - không phải cháu, chắt,...
.lp-slideshow,
.lp-slideshow * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.lp-slideshow {
width: 100%;
}
.lp-slideshow>.container {
position: relative;
margin: auto;
width: 100%;
}
.lp-slideshow>.container>.slide {
width: 100%;
height: 100%;
position: absolute;
margin: auto;
opacity: 0;
transition: opacity 0.6s ease;
-webkit-transition: opacity 0.6s ease;
-moz-transition: opacity 0.6s ease;
-o-transition: opacity 0.6s ease;
}
.lp-slideshow>.container>.slide.active {
opacity: 1;
}
.lp-slideshow>.container>.slide>.image {
width: 100%;
height: 100%;
object-fit: cover
}
.lp-slideshow>.container>.slide>.number-text {
color: #fff;
font-size: 1rem;
padding: 8px 12px;
position: absolute;
top: 0;
}
.lp-slideshow>.container>.slide>.caption-text {
color: #fff;
font-size: 1.3rem;
padding: 8px 12px;
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.2);
}
.lp-slideshow>.container>.prev,
.lp-slideshow>.container>.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
font-size: 18px;
background-color: rgba(0, 0, 0, 0);
color: #fff;
font-weight: bold;
transition: background-color 0.6s ease;
-webkit-transition: background-color 0.6s ease;
-moz-transition: background-color 0.6s ease;
-o-transition: background-color 0.6s ease;
}
.lp-slideshow:hover>.container>.prev,
.lp-slideshow:hover>.container>.next {
background-color: rgba(0, 0, 0, 0.2);
}
.lp-slideshow:hover>.container>.prev:hover,
.lp-slideshow:hover>.container>.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.lp-slideshow>.container>.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.lp-slideshow>.container>.prev {
left: 0;
border-radius: 0 3px 3px 0;
}
.lp-slideshow>.dot-container {
text-align: center;
margin: 1rem auto;
}
.lp-slideshow>.dot-container>.dot {
height: 15px;
width: 15px;
margin: 0 0.4rem;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
-webkit-transition: background-color 0.6s ease;
-moz-transition: background-color 0.6s ease;
-o-transition: background-color 0.6s ease;
}
.lp-slideshow>.dot-container>.dot.active,
.lp-slideshow>.dot-container>.dot:hover {
background-color: #717171;
}
.lp-slideshow>.dot-container>.dot:not(.active):hover {
cursor: pointer;
}
Sử dụng Slideshow component.
./src/App.css.
/* Không thay đổi */
.App,
.App * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.App {
text-align: center;
width: 100%;
max-width: 780px;
margin: auto;
padding: 15px;
color: #222;
font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}
./src/App.js.
import React from 'react';
import './App.css';
import Slideshow from './components/slideshow/slideshow';
import img1 from './images/01.jpg';
import img2 from './images/02.jpg';
import img3 from './images/03.jpg';
import img4 from './images/04.jpg';
import img5 from './images/05.jpg';
import img6 from './images/06.jpg';
const collection = [
{ src: img1, caption: "Caption one" },
{ src: img2, caption: "Caption two" },
{ src: img3, caption: "Caption three" },
{ src: img4, caption: "Caption four" },
{ src: img5, caption: "Caption five" },
{ src: img6, caption: "Caption six" },
];
export default class App extends React.Component {
render() {
return (
<div className="App">
<Slideshow
input={collection}
ratio={`3:2`}
mode={`manual`}
/>
<Slideshow
input={collection}
ratio={`3:2`}
mode={`automatic`}
timeout={`3000`}
/>
<div>
Made by <a href="https://about.phamvanlam.com/">Lam Pham</a>.
Visit me at <a href="/">completejavascript.com</a>.
</div>
</div>
);
}
}
Trong đó, component Slideshow có các thuộc tính là:
- input (Array): mảng chứa thông tin các ảnh, với mỗi phần tử là một object gồm src - đường dẫn ảnh và caption - tiêu đề ảnh.
- ratio (String): string biểu diễn tỉ lệ width : height, ví dụ là "3:2". Chú ý là chiều rộng, mình luôn luôn để 100% nên mình chỉ cần truyền vào tỉ lệ này là OK.
- mode (String): kiểu chạy, có 2 giá trị là "manual" - thủ công và "automatic" - tự động. Riêng với trường hợp, chạy tự động thì bạn cần truyền thêm giá trị "timeout" - thời gian giữa các ảnh, mặc định là 5000 ms. Lời kết Trên đây là kết quả sau khi mình học React qua ví dụ #1 - Slideshow. Nếu bạn thấy hay thì có thể thực hành làm thử và tùy biến theo ý thích của bạn.
All rights reserved
