Hero Section Carousel for Visa Consultancy

change images acording to visa consultant company from unsplash , <Fragment> <button className="slider-prev slick-arrow" onClick={() => setActive(active == 1 ? 2 : 1)} > <i className="fas fa-chevron-left" /> </button> <div className={`slider-single-item slide-one ${active == 1 ? "slick-active" : "" }`} > <div className="container"> <div className="row align-items-center"> <div className="col-lg-6"> <div className="slider-images"> {/* <img className="image" src="assets/images/slider/slider-image2.png" alt="Slider" /> */} <img className="offer" src="https://www.istockphoto.com/photo/this-is-an-exterior-photo-of-a-home-for-sale-in-beverly-hills-ca-gm2155879454-576672639?utm_campaign=srp_photos_top&utm_content=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fhome&utm_medium=affiliate&utm_source=unsplash&utm_term=home%3A%3A%3A" alt="Organic" /> </div> </div> <div className="col-lg-6"> <div className="slider-content"> <div className="sub-title mb-20">Welcome to Canada Visa Experts</div> <h1>Your Trusted Visa Consultancy</h1> <h6>Helping Clients Achieve Their Dreams for Over 25 Years</h6> <div className="slider-btns mt-30"> <Link href="/services"> <a className="theme-btn style-two"> Explore Services <i className="fas fa-angle-double-right" /> </a> </Link> <Link href="/about"> <a className="theme-btn style-two"> Learn More <i className="fas fa-angle-double-right" /> </a> </Link> </div> </div> </div> </div> </div> </div> <div className={`slider-single-item slide-two ${active == 2 ? "slick-active" : "" }`} > <div className="container"> <div className="row align-items-center"> <div className="col-lg-6"> <div className="slider-images"> <img className="image" src="assets/images/slider/slider-image2.png" alt="Slider" /> <img className="offer" src="assets/images/shapes/organic.png" alt="Organic" /> </div> </div> <div className="col-lg-6"> <div className="slider-content"> <div className="sub-title mb-20">Welcome to Canada Visa Experts</div> <h1>Your Trusted Visa Consultancy</h1> <h6>Helping Clients Achieve Their Dreams for Over 25 Years</h6> <div className="slider-btns mt-30"> <Link href="/services"> <a className="theme-btn style-two"> Explore Services <i className="fas fa-angle-double-right" /> </a> </Link> <Link href="/about"> <a className="theme-btn style-two"> Learn More <i className="fas fa-angle-double-right" /> </a> </Link> </div> </div> </div> </div> </div> <div className="slide-shapes"> {/* <img className="pumpkin-shape" src="https://images.pexels.com/photos/457937/pexels-photo-457937.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Pumpkin" /> */} <img className="two-leaf" src="assets/images/slider/two-lear.png" alt="Leaf" /> <img className="half-leaf" src="assets/images/slider/half-leaf.png" alt="Leaf" /> <img className="leaf-one" src="assets/images/slider/leaf-1.png" alt="Leaf" /> <img className="leaf-two" src="assets/images/slider/leaf-2.png" alt="Leaf" /> </div> </div> <button className="slider-next slick-arrow" onClick={() => setActive(active == 2 ? 1 : 2)} > <i className="fas fa-chevron-right" /> </button> </Fragment>