我刚刚成立您使用的完整的工作演示glidejs使用React。检查一下，让我知道它是否对您有用。代码沙箱
class Plans extends Component {
state = {
myPlans: [
{ id: 0, text: "plan 0", price: 0 },
{ id: 1, text: "plan 1", price: 1 },
{ id: 2, text: "plan 2", price: 2 },
{ id: 3, text: "plan 3", price: 3 }
]
};
handleOffer = id => {
console.log("handleOffer clicked, id: ", id);
};
render() {
const carouselOptions = { type: "slide", perView: 1, startAt: 0 };
return (
<div className="home-section test">
<SliderGlide options={carouselOptions}>
{this.state.myPlans.map(plan => (
<OfferProduct
key={plan.id}
plan={plan}
handleOffer={this.handleOffer}
/>
))}
</SliderGlide>
</div>
);
}
}
export default Plans;
const OfferProduct = ({ plan, handleOffer }) => {
return (
<>
<div onClick={() => handleOffer(plan.id)} className="card">
<p>
<h3> Card no: {plan.id} </h3>
<span>price: {plan.price}</span>
</p>
</div>
</>
);
};
export default OfferProduct;
export default class SliderGlide extends Component {
state = { id: null };
componentDidMount = () => {
// Generated random id
this.setState(
{ id: `glide-${Math.ceil(Math.random() * 100)}` },
this.initializeGlider
);
};
initializeGlider = () => {
this.slider = new Glide(`#${this.state.id}`, this.props.options);
this.slider.mount();
};
componentWillReceiveProps = newProps => {
if (this.props.options.startAt !== newProps.options.startAt) {
this.slider.go(`=${newProps.options.startAt}`);
}
};
render = () => (
// controls
<div id={this.state.id} className="slider">
<div className="two-controls-btns" data-glide-el="controls">
<button className="arrow-left" data-glide-dir="<" title="start">
<span className="hidden">Start</span>
</button>
<button className="arrow-right" data-glide-dir=">" title="end">
<span className="hidden">End</span>
</button>
</div>
{/* track */}
<div className="glide__track" data-glide-el="track">
<div className="glide__slides" style={{ display: "flex" }}>
{this.props.children.map((slide, index) => {
return React.cloneElement(slide, {
key: index,
className: `${slide.props.className} glide__slide`
});
})}
</div>
</div>
{/* bottom bullets */}
<div className="bottom_bullets" data-glide-el="controls[nav]">
{this.props.children.map((slide, index) => {
return (
<button
key={index}
className="single-bullet"
data-glide-dir={"=" + index}
title=".g"
/>
);
})}
</div>
</div>
);
}
SliderGlide.defaultProps = {
options: {}
};
.App {
font-family: sans-serif;
text-align: center;
}
.home-section {
width: 500px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
}
.card {
width: 50px;
height: 75px;
background-color: violet;
padding: 10px;
}
.slider {
width: 300px;
height: 200px;
overflow-x: hidden;
user-select: none;
padding: 20px;
}
.arrow-left,
.arrow-right {
background-color: #4caf50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
border-radius: 50%;
}
.two-controls-btns {
width: 100%;
margin: auto;
padding: 0;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
}
.single-bullet {
background-color: #080f47;
border: none;
padding: 8px;
display: inline-block;
margin: 5px;
border-radius: 50%;
}
.bottom_bullets {
width: 200px;
margin: auto;
padding: 0;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
}
.test {
border: 1px solid red;
}
602392714
清零编程群