[英]OwlCarouse in React - strange behavior
please take a look at this site .请看看这个网站。 Especially at the "Opinie i recenzje" section in the bottom.特别是在底部的“Opinie i recenzje”部分。 Here you can see the owl carousel:在这里你可以看到猫头鹰旋转木马:
Since some text are too long I created a component called ExpandText
that will show more text on click, and hide text on next click.由于某些文本太长,我创建了一个名为ExpandText
的组件,该组件将在单击时显示更多文本,并在下次单击时隐藏文本。
For some of the boxes works fine.对于某些盒子工作正常。 For other boxes it does not expand.对于其他框,它不会扩展。 However if you click the non expanding-text when the box is at a different position, it will eventually work fine:/但是,如果您在框位于不同的 position 时单击非扩展文本,它最终会正常工作:/
In order to expand you have to click on Zwiń
.为了扩大你必须点击Zwiń
。
Here is the Expand Component:这是扩展组件:
export class ExpandText extends React.Component {
constructor(props) {
super(props);
this.state = {
showFull: false
};
}
render() {
let visibleText = null;
let expander = null;
if (this.state.showFull || this.props.text.length <= this.props.maxLength) {
visibleText = this.props.text;
} else {
visibleText = this.props.text.substring(0, this.props.maxLength);
}
const self = this;
const clickHandler = () => {
self.setState({showFull: !self.state.showFull});
}
if(this.props.text.length > this.props.maxLength){
expander = this.state.showFull
? <span onClick={clickHandler}><b>Zwiń</b></span>
: <span onClick={clickHandler}><b>Rozwiń</b></span>;
}
return <React.Fragment>
{visibleText} {expander}
</React.Fragment>;
}
}
And here is the Owl Carousel section:这是猫头鹰旋转木马部分:
import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
const OwlCarousel = dynamic(import("react-owl-carousel3"));
import { finalPath } from "../../pages/index";
import Link from "next/link";
import {ExpandText} from "./ExpandText";
const options = {
loop: true,
nav: true,
autoplay: true,
autoplayHoverPause: true,
mouseDrag: true,
center: true,
dots: false,
navText: [
"<i class='icofont-bubble-left'></i>",
"<i class='icofont-bubble-right'></i>",
],
responsive: {
0: {
items: 1,
},
768: {
items: 2,
},
1200: {
items: 3,
},
},
};
const Feedback = () => {
const [display, setDisplay] = useState(false);
useEffect(() => {
setDisplay(true);
});
return (
<section className="feedback-area ptb-100 bg-gray" id="references">
<div className="container">
<div className="section-title">
<h2>Opinie i recenzje</h2>
<div className="bar"></div>
<p>
Zobacz, co o książęce „Sekrety Rozwoju Osobistego” mówią ci, którzy
już ją przeczytali.
</p>
<p>
Już przeczytana?{" "}
<Link href="/opinie">
<a>Zostaw opinię.</a>
</Link>
</p>
</div>
<div className="row">
{display ? (
<OwlCarousel
className="feedback-slides owl-carousel owl-theme"
{...options}
>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client1.jpg"} alt="client" />
<h3>Alit John</h3>
<span>Web Developer</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client2.jpg"} alt="client" />
<h3>Alit John</h3>
<span>SEO Expert</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client3.jpg"} alt="client" />
<h3>Steven John</h3>
<span>Web Developer</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
<div className="col-lg-12">
<div className="single-feedback-box">
<div className="client-info">
<img src={finalPath + "/images/client4.jpg"} alt="client" />
<h3>David Warner</h3>
<span>Web Developer</span>
</div>
<p>
<ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
</p>
</div>
</div>
</OwlCarousel>
) : (
""
)}
</div>
</div>
<svg
className="svg-feedback-bottom"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<path d="M0,70 C30,130 70,50 100,70 L100,100 0,100 Z" fill="#ffffff" />
</svg>
</section>
);
};
export default Feedback;
In package.json I have this version:在 package.json 我有这个版本:
"react-owl-carousel3": "^2.2.5",
Anybody knows why such issue?有人知道为什么会出现这样的问题吗? The GitHub officla repo seems to be unresponsive since months... I also searched existing issues or past issues, but I couldn't find anything related. GitHub 官方回购似乎几个月以来没有响应......我还搜索了现有问题或过去的问题,但我找不到任何相关内容。 I found this issue however, but tried to apply the fix, recompiled, but the problem didn't fix.但是我发现了这个问题,但尝试应用修复程序,重新编译,但问题没有解决。 So it's probably something else.所以这可能是别的东西。
I noticed that the unclickable slides had a class cloned
.我注意到不可点击的幻灯片有一个 class cloned
。 Thus I searched... and found this issue: https://github.com/OwlCarousel2/OwlCarousel2/issues/2091因此我搜索......并发现了这个问题: https://github.com/OwlCarousel2/OwlCarousel2/issues/2091
I set:我设置:
loop:false,
rewind:true,
items:3,
startPosition:1,
And it now works fine现在它工作正常
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.