CODEWITHSUNDEEP
reactjs
Ilimkan Omurzakova
Ilimkan Omurzakova

Reputation: 313

How to set initial active slide to different index in react-id-swiper?

I'm using react-id-swiper and everything works perfectly, but I need to set the initial active slide to other index. Right now by default it set to first slide; so just for example, let's say I'll have a JSON file with some content for sliders, and the card #5 has to be active when page loads. How can I do this?

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;

enter image description here

Upvotes: 2

Views: 13562

Answers (3)

hs L
hs L

Reputation: 13

I don't know about 'react-id-swiper', but in case of react version of 'swiper', it has 'realIndex' props.

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

you can get methods for slide change and realIndex use 'useRef'. https://codesandbox.io/s/reactidswiper-demo-forked-yn90x?file=/src/slider.js

Upvotes: 1

Ilimkan Omurzakova
Ilimkan Omurzakova

Reputation: 313

The activeSlideKey wasn't working since there wasn't any key values for each card. 

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>
     );
}

Upvotes: 4

Anass TIssir
Anass TIssir

Reputation: 240

As you can see from the the doc, you have a props called 'activeSlideKey' initialy is setted to null, you can add it as:

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

Upvotes: 1

Related Questions