react-bootstrap how to control Carousel settings , controls, indicators, autorotation, interval time

user_1904875 0
Viewed 2474

So question is simple: how to pass variables for managing settings in Carousel (react-bootstrap)? I would like to pass (params/props/state) to so to be able to dynamically show /hide next previous buttons, autoplay, time interval in between two slides etc by passing props as one would do in regular bootstrap carousel (where that is done by adding html or hiding it by CSS which is imao 2010 solution). Any idea?

Here is my code taken from: here. Unfortunately poor documentation (or poor UI so I was not able to locate more detailed documentation.)

CODE: 

 <Carousel>

  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=First slide&bg=373940"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>

  /* and so on,  next item, next item, etc... */

</Carousel>
carousel react-bootstrap
3 Answers

After trying with some workaround and spending hours on comparing Carousel react-bootstrap with Carousel bootstrap itself, I got this solution working in react-bootstrap: 

 <Carousel
    autoPlay={true}
    interval={5000}
    controls={false}
    indicators={false}
  >

Now only thing you should do is to make these true /false coming from your json/config/props to make changes programmatic. Note "interval" is value in milliseconds (example: 5000 for 5 sec frame).

I hope this solution helps someone as I wish it helped me at the time I asked question :) Cheers!

user_19048750

use this in case of turning off auto scroll feature

<Carousel   interval={null}>`

carousel not scroll auto

user_115041750

Adding interval={null} on the Carousel tag will do the trick.

<Carousel interval={null}>

  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=First slide&bg=373940"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>

  /* and so on,  next item, next item, etc... */

</Carousel>
user_168536220
Related