CODEWITHSUNDEEP
carouselreact-bootstrap
StefaDesign
StefaDesign

Reputation: 959

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

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>

Upvotes: 2

Views: 4797

Answers (3)

Rahul Dev
Rahul Dev

Reputation: 906

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>

Upvotes: 0

khush mohammad
khush mohammad

Reputation: 38

use this in case of turning off auto scroll feature

<Carousel   interval={null}>`

carousel not scroll auto

Upvotes: 1

StefaDesign
StefaDesign

Reputation: 959

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!

Upvotes: 1

Related Questions