如何在react-id-swiper中将初始活动幻灯片设置为不同的索引？

Question

我正在使用react-id-swiper，并且一切正常，但是我需要将初始活动幻灯片设置为其他索引。现在默认情况下，它设置为第一张幻灯片；举例来说，假设我要创建一个JSON文件，其中包含一些用于滑块的内容，并且＃5卡在页面加载时必须处于活动状态。我该怎么办？

import React, { Component } from 'react';
// import Swiper from 'react-id-swiper';
import Swiper from '@mootzy/react-id-swiper';

class Swipe extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            params: {
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                activeSlideKey: '5',
                coverflowEffect: {
                  rotate: 50,
                  stretch: 0,
                  depth: 100,
                  modifier: 1,
                  slideShadows: true
                }
              }
         }
        
    }

    componentDidMount() {
        setTimeout(() => this.setState({ 
            params: {
                activeSlideKey: 5
              }
         }), 500)
    }

    render() { 
        return ( 
            <Swiper {...this.state.params} activeSlideKey='5'>
                <div>0</div>
                <div>5</div>
                <div>10</div>
                   ...
                <div>100</div>
            </Swiper>
         );
    }
}
 
export default Swipe;

Answer 1

从文档中可以看到，您有一个名为“ activeSlideKey”的道具初始设置为null，您可以将其添加为：

<Swiper {...params} activeSlideKey='5'>
...
</Swiper>

Answer 2

我不知道‘react-id-swiper’， 但如果是'swiper'的react版本，它有'realIndex'道具。

<Swiper onSlideChange={(e) => console.log(e.realIndex)}>

---

您可以获得幻灯片更改和 realIndex 使用“useRef”的方法。 https://codesandbox.io/s/reactidswiper-demo-forked-yn90x?file=/src/slider.js

Answer 3

activeSlideKey不起作用，因为每个卡都没有任何键值。

render() { 
    return ( 
        <Swiper {...this.state.params} activeSlideKey='5'>
            <div key='0'>0</div>
            <div key='5'>5</div>
            <div key='10'>10</div>
               ...
            // Add key='value'
            <div key='100'>100</div>
        </Swiper>
     );
}