[英]How to pass data-attribute value to another function outside map function?
I'm working on a slider, what I'm trying to accomplish is to pass the data-attribute from outside my object to the bullet-navigation so that it matches to the current slide? 我正在使用滑块,我要完成的工作是将数据属性从对象外部传递到项目符号导航,以使其与当前幻灯片匹配? I don't know how I'm stuck.
我不知道如何被卡住。
can someone help? 有人可以帮忙吗?
import React from 'react';
import Swiper from 'react-id-swiper';
class RunSwiper extends React.Component {
render() {
const dataSlides = [
'Ga voor grenzeloos',
'Sectoren',
'Wat wil jij?',
'Vlogs',
'Belangrijke data'
];
const params = {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<div class="' + className + '">' + (index + 1) + name + '</div>';
}
}
};
return (
<Swiper {...params}>
{
dataSlides.map((name, index) => {
return <div className={`swiper__step swiper__step--${index + 1}`} key={index} data-slide={name}>{name}</div>
})
}
</Swiper>
)
}
}
export default runSwiper;
You are already receiving the index
as an argument. 您已经收到
index
作为参数。 So you can use that index to access the name
from the dataSlides
array. 因此,您可以使用该索引从
dataSlides
数组访问name
。
const params = {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<div class="' + className + '">' + (index + 1) + dataSlides[index] + '</div>';
}
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.