Question

我正在尝试使用flexbox和React（没有JQuery，库或DOM操作）来制作Carousel（别名滑块）。

为了重新排序项目，我使用了flexbox的属性import numpy as np orig = [({'x': 28.346, 'y': 19}, 'Text0'), ({'x': 109.726, 'y': 19}, 'Text1'), ({'x': 147.776, 'y': 19}, 'Text2'), ({'x': 153.606, 'y': 24}, 'Text3'), ({'x': 452.788, 'y': 24}, 'Text4'), ({'x': 504.168, 'y': 34}, 'Text5'), ({'x': 527.768, 'y': 34}, 'Text6'), ({'x': 533.598, 'y': 45}, 'Text7'), ({'x': 64.291, 'y': 55}, 'Text8'), ({'x': 98.623, 'y': 55}, 'Text9')] input_array = np.array([val[0]['y'] for val in orig]) out_array = [np.where(input_array == element)[0].tolist() for element in np.unique(input_array)] res = [[orig[i] for i in ind_arr] for ind_arr in out_array] print(res)。但是，此属性不支持任何过渡效果，因此，为了达到这种效果，我尝试做与本文说明相同的操作：https://blog.envylabs.com/the-order-property-flexbox-carousels-87a168567820（使用[[({'x': 28.346, 'y': 19}, 'Text0'), ({'x': 109.726, 'y': 19}, 'Text1'), ({'x': 147.776, 'y': 19}, 'Text2')], [({'x': 153.606, 'y': 24}, 'Text3'), ({'x': 452.788, 'y': 24}, 'Text4')], [({'x': 504.168, 'y': 34}, 'Text5'), ({'x': 527.768, 'y': 34}, 'Text6')], [({'x': 533.598, 'y': 45}, 'Text7')], [({'x': 64.291, 'y': 55}, 'Text8'), ({'x': 98.623, 'y': 55}, 'Text9')]]）

尽管如此，我在响应能力，不同步骤（例如将3张幻灯片从3张幻灯片而不是一张幻灯片移到3张），过渡效果...方面遇到了很多问题。

如果有人能帮助我解决这个多虫的问题，我将不胜感激……经过很多时间，我现在很头疼...

我将代码添加到stackblitz中：

编辑器：https://stackblitz.com/edit/carousel-pov
应用：https://carousel-pov.stackblitz.io

我也在这里添加代码：

carousel.js

order

carousel.scss

transform

使用示例：

import React, { Component } from 'react' import './carousel.scss' const STEP = 1 export default class Carousel extends Component { constructor(props) { super(props) this.next = this.next.bind(this) this.prev = this.prev.bind(this) this.resetSet = this.resetSet.bind(this) this.state = { ref: 0, isSet: true, isReversing: false } } getOrder(index) { const { items } = this.props const { ref } = this.state const order = index - ref if (order >= 0) { return order } return items.length - order } resetSet() { setTimeout(() => { this.setState({ isSet: true }) }, 50) } next() { const { ref } = this.state const { items } = this.props const newRef = ref + STEP if (newRef < items.length) { this.setState({ ref: newRef, isSet: false, isReversing: false, }, this.resetSet) } } prev() { const { ref } = this.state const newRef = ref - STEP if (newRef >= 0) { this.setState({ ref: newRef, isSet: false, isReversing: true, }, this.resetSet) } } render() { const { title, items } = this.props const { isSet, isReversing } = this.state const classSet = isSet ? 'is-set' : '' const classReversing = isReversing ? 'is-reversing' : '' return ( <> {title && <h2 className="carousel-title">{title}</h2>} <div className="carousel-wrapper" role="listbox"> <div role="button" onClick={this.prev} tabIndex={0} className="arrow" > ⬅️ </div> <div className={`carousel ${classSet} ${classReversing}`}> {items.map((item, index) => ( <div key={item} style={{ order: this.getOrder(index) }} className="item" >{item}</div> ))} </div> <div className="arrow" role="button" onClick={this.next} tabIndex={0} > ➡️ </div> </div> </> ) } }

非常感谢您的帮助！

Answer 1

好吧

这就是我所发现的：

第一个：您在100％上进行过渡：因此，如果显示3个项目，则所有三个项目都将滑动，我已设法手动处理，将100％更改为250px（也许有更好的方法，但这是个主意）

transform: translateX(250px);

&.is-reversing {
  transform: translateX(250px)
}

第二：您的getOrder确实返回了

items.length - order

代替

items.length + order

像这样

getOrder(index) {
    const { items } = this.props
    const { ref } = this.state
    const order = index - ref

    if (order >= 0) {
      return order;
    }
    else{
        return items.length + order;
    }

}

然后对于幻灯片，当ref高于items.length时，NEXT没有结果

if (newRef <= items.length) {
  this.setState({
    ref: newRef,
    isSet: false,
    isReversing: false,
  }, this.resetSet)
}else{
  this.setState(
    {
      ref: 1,
      isSet: false,
      isReversing: false
    },
    this.resetSet
  );
}

您的幻灯片PREV应该像这样

if (newRef >= 0) {
  this.setState({
    ref: newRef,
    isSet: false,
    isReversing: true,
  }, this.resetSet)
}else{
  this.setState(
    {
      ref: 8,
      isSet: false,
      isReversing: true
    },
    this.resetSet
  );
}

如您所见，我添加了一些东西，例如250px和“ 8”，可能会添加为250px是项目宽度，而8是数组的最后一个索引。

我也意识到您的过渡总是向左滑动。我一有空就可以看得更远，但现在这是我设法做到的，

我希望它能对您有所帮助，不确定我是否做得很好，但我已尽力而为。

玩得开心

https://stackblitz.com/edit/carousel-pov-rvftku

编辑：在stackblitz上添加了一个轮播叉

带Flexbox的轮播（滑块）和React

1 个答案: