I found a carousel on internet made from HTML and CSS and copy pasted it into my website code. The code i found had the code for the buttons written before the code of carousel that's why the buttons were showing at the top of carousel. I corrected the layout but for some reason the buttons stopped working.
.products {
grid-template-rows: 500px 100px;
grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px;
}
.rbn {
margin: 0px 5px 0px 5px;
}
.images {
width: auto;
height: 500px;
max-height: 400px;
margin: auto;
display: block;
}
main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100vw;
height: 500px;
padding-right: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 8;
--middle: 3;
--position: 1;
pointer-events: none;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}
div.item:nth-of-type(1) {
--offset: 1;
background-color: #90f1ef;
}
div.item:nth-of-type(2) {
--offset: 2;
background-color: #ff70a6;
}
div.item:nth-of-type(3) {
--offset: 3;
background-color: #ff9770;
}
div.item:nth-of-type(4) {
--offset: 4;
background-color: #ffd670;
}
div.item:nth-of-type(5) {
--offset: 5;
background-color: #e9ff70;
}
div.item:nth-of-type(6) {
--offset: 6;
background-color: #f76e11;
}
div.item:nth-of-type(7) {
--offset: 7;
background-color: #2eb086;
}
div.item:nth-of-type(8) {
--offset: 8;
background-color: #faeee7;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
input:nth-of-type(1):checked~main#carousel {
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked~main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked~main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked~main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked~main#carousel {
--position: 5;
}
input:nth-of-type(6) {
grid-column: 7 / 8;
grid-row: 2 / 3;
}
input:nth-of-type(6):checked~main#carousel {
--position: 6;
}
input:nth-of-type(7) {
grid-column: 8 / 9;
grid-row: 2 / 3;
}
input:nth-of-type(7):checked~main#carousel {
--position: 7;
}
input:nth-of-type(8) {
grid-column: 9 / 10;
grid-row: 2 / 3;
}
input:nth-of-type(8):checked~main#carousel {
--position: 8;
}<div "products">
<main id="carousel">
<div class="item">
<img class="images" src="almondflakes.png" alt="af" />
</div>
<div class="item">
<img class="images" src="butterscotchballs.png" alt="bb" />
</div>
<div class="item">
<img class="images" src="chocoballs.png" alt="cb" />
</div>
<div class="item">
<img class="images" src="chocolatesprinklers.png" alt="cs" />
</div>
<div class="item">
<img class="images" src="oreodust.png" alt="od" />
</div>
<div class="item">
<img class="images" src="rainbowsprinkles.png" alt="rs" />
</div>
<div class="item">
<img class="images" src="ricekrispies.png" alt="rk" />
</div>
<div class="item">
<img class="images" src="whitecreamballs.png" alt="wc" />
</div>
</main>
<input class="rbn" type="radio" name="position" checked />
<input class="rbn" type="radio" name="position" />
<input class="rbn" type="radio" name="position" />
<input class="rbn" type="radio" name="position" />
<input class="rbn" type="radio" name="position" />
<input class="rbn" type="radio" name="position" />
<input class="rbn" type="radio" name="position" />
<input class="rbn" type="radio" name="position" />
</div>
