React-id-swiper: Swiper dont work until inspect element

[nicolaselmir]

Im mapping some components in the swiper and I cant scroll until I do inspect elements.
Please help

[kidjp85]

@nicolaselmir : Can you show me your component code ?

[nicolaselmir]

const supps = this.state.supps.map((item) => <div key={item.id} className="col-md-3" style={{textAlign:'center',borderRadius:100}}> <div style={{backgroundColor:'white',height:300,width:300,marginTop:20}}> <img src={item.logo} style={{width:80,height:80,borderRadius:100,marginTop:10}}/> <h5 style={{fontWeight:'bold',color:'#9968B3'}}>{item.offer}</h5> <h6 style={{color:'grey',fontWeight:'100',marginTop:-25}}>{item.name}</h6> <input type="submit" id="submitButton" name="submitButton" value="Visit" onClick={()=>this.visit(item.id)} style={{color:'white',width:100,height:40,backgroundColor:'#9968B3',borderColor:'#9968B3',borderRadius:10}}/> </div> </div> )

<Swiper slidesPerView={params.slidesPerView} spaceBetween={params.spaceBetween} centeredSlides={params.centeredSlides} pagination={params.pagination}> {supps} </Swiper>

[kidjp85]

Can u try these code ?

const renderItem = item =>
  <div key={item.id} className="col-md-3" style={{textAlign:'center',borderRadius:100}}>
    <div style={{backgroundColor:'white',height:300,width:300,marginTop:20}}>
      <img src={item.logo} style={{width:80,height:80,borderRadius:100,marginTop:10}}/>
      <h5 style={{fontWeight:'bold',color:'#9968B3'}}>{item.offer}</h5>
      <h6 style={{color:'grey',fontWeight:'100',marginTop:-25}}>{item.name}</h6>
      <input 
        type="submit"
        id="submitButton"
        name="submitButton"
        value="Visit"
        onClick={()=>this.visit(item.id)}
        style={{color:'white',width:100,height:40,backgroundColor:'#9968B3',borderColor:'#9968B3',borderRadius:10}}/> 
    </div>
  </div>


<Swiper
  slidesPerView={params.slidesPerView}
  spaceBetween={params.spaceBetween}
  centeredSlides={params.centeredSlides}
  pagination={params.pagination}
>
  {this.state.supps.map(renderItem)}
</Swiper>

[Altiano]

try this @nicolaselmir : get swiper instance on render, and call swiper.update() on compoonentDidUpdate

or... add shouldSwiperUpdate prop to <Swiper />

[nicolaselmir]

I didn't understand can you please give me some details.

[Altiano]

<Swiper
  shouldSwiperUpdate
  slidesPerView={params.slidesPerView}
  spaceBetween={params.spaceBetween}
  centeredSlides={params.centeredSlides}
  pagination={params.pagination}
>
{items}
</Swiper>

[LennyLip]

In this example, I got disabled navigation buttons. How to I can fix it? When I used

virtual: {
   slides:  } 

it was working

[LennyLip]

ok, fixed

 virtual: {
        slides: self.state.slides,
        renderExternal: function (data) {
          // empty function is need to disable internal rendering, more info http://idangero.us/swiper/api/#virtual
        }
      }