import React,{useState,useEffect} from 'react'
import axios from 'axios';
import {Link} from "react-router-dom";
function Slider() { const [slider, setSlider] = useState([]); useEffect(()=>{ async function AboutGet(){ let res = await axios.get("http://localhost:5003/slider") setSlider(res.data); } AboutGet();
},[]) return (
< >
<div id="carouselExampleCaptions" className="carousel slide" data-bs-ride="carousel"> <div className="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div className="carousel-inner"> { slider.map((element, index)=> { return( <div key={element._id}> <div className="carousel-item active"> <img src={`http://localhost:5003/${element.files[0].filePath}`} className="d-block w-100" alt="..."/> <div className="carousel-caption captionText mb-5 "> <p> {element.text1}</p> <h5>{element.title1}</h5> <Link to="stan" className="btn btn-orange btn-rounded btn-medium ">{element.button}</Link> </div> </div> <div className="carousel-item"> <img src={`http://localhost:5003/${element.files[1].filePath}`} className="d-block w-100" alt="..."/> <div className="carousel-caption captionText mb-5 "> <p>{element.text2}</p> <h5>{element.title2}</h5> <Link to="stan" className="btn btn-orange btn-rounded btn-medium ">{element.button}</Link> </div> </div> <div className="carousel-item "> <img src={`http://localhost:5003/${element.files[2].filePath}`} className="d-block w-100" alt="..."/> <div className="carousel-caption captionText mb-5 "> <p>{element.text3}</p> <h5>{element.title3}</h5> <Link to="stan" className="btn btn-orange btn-rounded btn-medium ">{element.button}</Link> </div> </div> </div> ) }) } </div> <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span className="carousel-control-prev-icon" aria-hidden="true"></span> <span className="visually-hidden">Previous</span> </button> <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <span className="carousel-control-next-icon" aria-hidden="true"></span> <span className="visually-hidden">Next</span> </button>
</div>
</> )
}
export default Slider