Я создал ползунок книги, где каждая сторона занимает 50% ширины. Для мобильных устройств направление страниц меняется так, что они располагаются друг над другом, а не рядом друг с другом. Мне нужны разные высоты для страниц. Изображения должны быть 30-40%, а содержание около 60-70% по высоте. Эффект Flip падает в этот момент. Я думаю, это потому, что высота меняется, как только дан класс. Однако это выглядит странно. Может ли кто-нибудь помочь мне сделать так, чтобы это выглядело как страница, которая на самом деле переворачивается?
class BookSlider extends React.Component {
constructor(props) {
super(props);
this.state = {slideCount: 0, slider: []};
this.handleClick = this.handleClick.bind(this);
this.resolveClassNames = this.resolveClassNames.bind(this);
}
componentDidMount() {
let _this = this;
let count = this.state.slideCount;
// create slider elements
const slider = [];
let initialContent = [];
this.props.content.map((obj) => {
if (obj.slideNo === 1) {
initialContent.push(obj);
}
})
slider.push({content: initialContent, slideNo: 1});
this.props.images.map((img) => {
let contents = [];
this.props.content.map((obj) => {
if (img.slideNo + 1 === obj.slideNo) {
contents.push(obj);
}
})
const slide = {
img: img.img,
slideNo: img.slideNo,
content: contents
}
slider.push(slide)
})
this.setState({slider})
}
handleClick(type) {
if (type === 'next') {
$(`#slide-${this.state.slideCount}`).next().addClass("flipped");
$(`#slide-${this.state.slideCount + 2}`).addClass("active");
$('.active').next().addClass('active-mute');
this.setState({slideCount: this.state.slideCount < (this.props.images.length - 1) ?
this.state.slideCount + 1 : 0});
}
if (type === 'prev') {
$(`#slide-${this.state.slideCount - 1}`).next().removeClass("flipped");
this.setState({slideCount: this.state.slideCount - 1 >= 0 ? this.state.slideCount - 1 :
this.props.images.length - 1});
}
}
resolveClassNames(slideNo) {
const { slideCount, slider } = this.state;
if (slideCount === slideNo - 1) {
return 'page active'
}
else if (slideCount - 1 === slideNo) {
return 'page flipped active-mute';
}
else if (slideCount - 1 <= 0 && slideNo === (slider.length -1 )) {
return 'page flipped active-mute';
}
else if (slideCount === slideNo && (slideCount < slider.length || slideCount === 0 && slideNo ===
slideCount)) {
return 'page flipped active';
}
else if (slideCount - 1 === slideNo && slideCount - 1 < 0 && (slideNo === (slider.length - 1))) {
return 'page flipped active';
}
else if (slideCount + 2 === slideNo && slideCount + 2 <= (slider.length - 1)) {
return 'page active-mute';
}
else if (slideCount + 2 > slideNo && (slideCount + 2) - (slider.length) === slideNo) {
return 'page active-mute';
}
else {
return 'page';
}
}
render() {
const { slider } = this.state;
return (
<section
className="partial-book-slider"
>
<div className="container-fluid">
<div className="row">
<div className="col-12 col-md-10 offset-md-1">
<div
className='partial-book'
data-aos="fade-up"
data-aos-once="true"
>
<div className="book-bg-left bg-primary">
<div className="content-wrap">
<div className='content h-100 d-flex justify-content-around flex-column'>
{slider[slider.length - 2] && slider[slider.length - 2].content && slider[slider.length - 2].content.map((obj, i) => {
const k = `slide_content_${i}`;
return (
<div key={k} className="container-fluid">
<div className="row">
<div className="col-2 pr-0">
<div>
<img className="mw-100 text-white" src={obj.media.url}/>
</div>
</div>
<div className="col-10">
<div className="text-white font-weight-bold">{obj.title}</div>
<p>{obj.description}</p>
</div>
</div>
</div>
)
})}
</div>
</div>
</div>
{slider[1] && slider[1].img && (
<div className="book-bg-right">
<div className="img-wrap" style={{'background-image': `url("${slider[1].img.url}")`}} />
</div>
)}
{slider.map((slide, index) => {
const key = `slide-${index}`;
return (
<div key={key} id={key} className={this.resolveClassNames(index)}>
<div className="content-wrap">
<div className='content h-100 d-flex justify-content-around flex-column'>
{slide.content && slide.content.map((obj, i) => {
const k = `slide_${index}_content_${i}`;
return (
<div key={k} className="container-fluid">
<div className="row">
<div className="col-2 pr-0">
<div>
<img className="mw-100 text-white" src={`${obj.media.url}`}/>
</div>
</div>
<div className="col-10">
<div className="text-white font-weight-bold">{obj.title}</div>
<p>{obj.description}</p>
</div>
</div>
</div>
)
})}
</div>
</div>
{slide.img && (
<div className="img-wrap" style={{'background-image': `url("${slide.img.url}")`}} />
)}
</div>
)
})}
</div>
<div className="text-center my-4 slider-controls">
<button id="prev" onClick={(e) => this.handleClick('prev')}>
PREV
</button>
<button id="next" onClick={(e) => this.handleClick('next')}>
NEXT
</button>
</div>
</div>
</div>
</div>
</section>
);
}}
Вот мой взгляд CodePen на <600px (мобильный). </p>
https://codepen.io/mblmarlon/pen/poJoVzx?editors=0110