Initially, my aim is to center the slideshow on the page but I am uncertain about how to achieve it.
This is how my current webpage appears:
https://i.sstatic.net/E6bzQ.png
Furthermore, as shown in the image, the sliding effect of the blue slide is moving towards the right instead of fading out, and I want to hide it completely.
In the diagram, the slides are supposed to move left (indicated by red arrows) while staying hidden when going right (indicated by blue arrows). https://i.sstatic.net/K9gG4.png
Any suggestions on how I can implement this?
Link to the page:
import "./Home.css";
import React from "react";
import { Link } from "react-router-dom";
import {Slideshow, SlideshowItem } from "../components/slideShow.js"
import BitCoinImg from "../images/bitcoin.jpg"
import ethImg from "../images/eth.jpg"
import litecoinImg from "../images/Litecoin.jpg"
function Home() {
return(
<div style={{textAlign:"center", fontFamily:"Comic Sans MC", fontSize:"100"}}>
THIS IS THE HOME PAGE
<nav>
<Link to="/bitcoin" style={{margin: "10px"}}> Bitcoin </Link>
<Link to="/litecoin" style={{margin: "10px"}}> LiteCoin </Link>
<Link to="/ethereum" style={{margin: "10px"}}> Ethereum </Link>
</nav>
<Slideshow>
<SlideshowItem>
<img src= {BitCoinImg}/>
</SlideshowItem>
<SlideshowItem>
<img src= {litecoinImg}/>
</SlideshowItem>
<SlideshowItem>
<img src= {ethImg}/>
</SlideshowItem>
</Slideshow>
</div>
)
}
export default Home;
Corresponding CSS file:
.gallery-container {
overflow: hidden;
position: relative;
}
.gallery-slider {
position: absolute;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}