A
A
adizh2021-06-24 10:44:01
css
adizh, 2021-06-24 10:44:01

How to make a slider based on data from json?

There is json format data, you need to make a slider based on this data.
The server folder where the data is located:

const express = require('express');
 server.get('/api/v1/startup', (req, res) => {
    res.send(
       JSON.stringify(
        [
        {"startup_id":2,"startup_name":"Mangoswap","startup_descr":"The mango swap coin is the future for crypto currency, it wllit. Exercitation veniam consequat sunt nostrud amet. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia  enim 
        {"startup_id":11,"startup_name":"Mangoswap","startup_descr":"The mango swap coin is the future for crypto currency, it will allow user share and tansact over defi networks with less fees.","startup_price":"$200,000/$400,000","startup_foundation":"Founded 17th May, 2015","website":"mangoswap.com","location":"San Francisco, California","teamSize":"100-500 people","founder":"Edmund Kitan","coFounder":"Olarenwaju Cesar","headGrowth":"Uzo Amanda","headProduct":"Dtation v"},
      
      
      ]
       )
    )
  
}); 
server.listen(port);
console.log(`serving on http://localhost:${port}`)


the component in which to display these data slides:
{startupData.map((s)=>(
        <MDBContainer>
          <MDBCarousel
            activeItem={111}
            length={1}
            showControls={true}
            showIndicators={true}
            className="z-depth-3"
            slide
          >
            <MDBCarouselInner>
              <MDBCarouselItem itemId={s.startup_id}>
              
               
      <div key={s.startip_id} className='startup_card'>
      <div className="card_header">
          <img src={image} alt="" />
          <div className="card_name">{s.startup_name}</div>
      </div>
<div className="card_descr">{s.startup_descr}</div>
<div className="card_info">
<div className="card_fund">Fund raise</div>
<div className="card_progress">50% complete</div>
</div>
<div className="card_price">{s.startup_price}</div>
<div className="card_range">
    <img src={range} alt="" />
</div>
<div className="card_button">
<button className='btn_fund'>Fund Startup</button>
{/* <Link className='link_startup'>Learn more</Link> */}
</div>

  </div>
              
              </MDBCarouselItem>
              
            </MDBCarouselInner>
          </MDBCarousel>
        </MDBContainer>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question