[英]how to show image slider in React
我正在使用此插件https://github.com/akiran/react-slick用於圖像滑塊,但由於某些原因,我無法實現我想要的。
這是一個示例代碼:
import React, { Component } from "react";
import Slider from "../src/slider";
import { baseUrl } from "./config";
export default class CenterMode extends Component {
render() {
const settings = {
customPaging: function(i) {
return (
<a>
<img src={`${baseUrl}/abstract0${i + 1}.jpg`} />
</a>
);
},
dots: true,
dotsClass: "slick-dots slick-thumb",
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2>Custom Paging</h2>
<Slider {...settings}>
<div>
<img src={baseUrl + "/abstract01.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract02.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract03.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract04.jpg"} />
</div>
</Slider>
</div>
);
}
}
除非圖像文件名類似於abstract01,abstract02,否則此方法就可以很好地工作,在我的情況下,圖像文件名是隨機的,可以是任何東西,因此縮略圖部分對我不起作用。 是否有任何選項可以在customPaging上傳遞一些其他參數,以便我可以接收src attr並可以從那里獲取文件名。
任何想法在這里將不勝感激。 注意:本例中的圖像來自Amazon s3,所以我完全無法控制它們!
我相信你可以做這樣的事情:
const images = [
{ src: baseUrl + "/abstract01.jpg" },
{ src: baseUrl + "/abstract02.jpg" },
{ src: baseUrl + "/abstract03.jpg" },
{ src: baseUrl + "/abstract04.jpg" },
];
export default class App extends Component {
render() {
const settings = {
customPaging: function (i) {
return (
<a>
<img src={images[i].src} />
</a>
);
},
dots: true,
dotsClass: "slick-dots slick-thumb",
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2>Custom Paging</h2>
<Slider {...settings}>
{images.map((img) => (
<div>
<img src={img.src} />
</div>
))}
</Slider>
</div>
);
}
}
基本上,您可以創建圖像數組(因為您已經知道圖像),然后通過它進行映射以獲取幻燈片,並在自定義分頁中使用迭代器從數組中按索引獲取圖像。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.