CODEWITHSUNDEEP
javascripthtmlnode.jsreactjsbootstrap-carousel
mary
mary

Reputation: 57

How to create carousel items with splice based on item count using React-Bootstrap

I am trying to do splice, so that each page (Active & Other items) displays 3 items. But this is not working. Can someone help here please?

Below is the code:

var Cards1= filter.splice(0, Math.ceil(filter.length / 3)).map( item => {
  return (
    <div class="cards">
    <div class="title">
    <h6><b>{item.Name }</b></h6>
    </div>
    <div class="des">
    <p> {item.DescriptionEN}</p>
    </div>
    </div>
  )
})
var Cards2= filter.splice(filter.length / 3).map( item => {
  return (
    <div class="cards">
    <div class="title">
    <h6><b>{item.Name }</b></h6>
    </div>
    <div class="des">
    <p> {item.DescriptionEN}</p>
    </div>
    </div>
  )
})
<div class="main">
<div id="inam" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-deck">
{Cards1}
</div>
</div>
<div class="carousel-item">
<div class="card-deck">
{Cards2}
</div>
</div>

Upvotes: 0

Views: 311

Answers (1)

michael
michael

Reputation: 4173

Please try this.

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      filter: [
        {
          name: "AAA",
          description: "BBB"
        }
      ]
    }
  }

  renderCards = (cards) => (
    cards.map(item => (
      <div class="cards">
        <div class="title">
          <h6><b>{item.name}</b></h6>
        </div>
        <div class="des">
          <p>{item.description}</p>
        </div>
      </div>
    ))
  )

  getSeparatedArray = (array) => {
    const res = [];
    for (let i = 0; i < array.length; i += 3) {
        const temp = array.slice(i, i + 3);
        res.push(temp);
    }
    return res;
  }

  render () {
    const { filter } = this.state
    const cardsList = this.getSeparatedArray(filter)

    return (
      <div class="main">
        <div id="inam" class="carousel slide" data-ride="carousel" >
          <div class="carousel-inner">
            {
              cardsList.map(cards => (
                <div class="carousel-item">
                  <div class="card-deck">
                    {this.renderCards(cards)}
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )
  }
}

Upvotes: 1

Related Questions