Мои стрелки вправо и влево не соответствуют моему изображению (слайд-шоу) ⇐ CSS

[Anonymous]

Я нахожусь на начальной стадии веб-разработки, чтобы попрактиковаться, я клонирую веб-сайты, которые позволяют мне со временем узнавать что-то новое.
У меня небольшая проблема с моей страницей, стрелки моего слайд-шоу не совпадают. с изображением еще менее отзывчивым. У кого-нибудь есть идеи, как этого добиться?

Код: Выделить всё

let slideIndex = 1;
sliderShow(slideIndex);

function sliderButton(n) {
sliderShow(slideIndex += n);
}

function sliderShow(n) {
let slides = document.getElementsByClassName('col-1');
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (let i = 0; i < slides.length;  i++) {
slides[i].style.display = 'none';
}
slides[slideIndex - 1].style.display = 'block';
}
sliderShow();

Код: Выделить всё

Jbody {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/*TitleEntete*/

.TitleEntete {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #23343e;
padding: 11px 0;
}

.TitleEntete span,
a {
font-size: 1.3rem;
color: white;
text-decoration: none;
}

.Title span {
color: #7a7a7a;
}

.Title-Icon #changeColor {
color: #7a7a7a;
}

.Title-Icon span {
margin: 0 10px;
}

/*Navigation*/

.Navigation {
background-color: #24b9d7;
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 19px 0;
}

.IconNav a img {
max-width: 100%;
width: 210px;
}

form input {
padding: 13px;
width: 500px;
border-radius: 2rem;
border: none;
outline: none;
}

/*row-container*/

.row-container {
display: flex;
flex-wrap: wrap;
margin-left: 15%;
}

.row-nav {
padding-top: 50px;
}

.nav-1 a {
color: black;
font-size: 1.1rem;
}

.row {
flex-grow: 1;
padding-left: 50px;
margin-top: 27px;
}

/*Slider*/

.col-1 {
position: relative;
display: none;
}

.Precedent,
.Suivant {
position: absolute;
top: 40%;
font-size: 2.5rem;
color: white;
padding: 10px;
transition: all 0.3s ease;
user-select: none;
}

.Suivant {
right: 17.2%;
}

.Suivant:hover,
.Precedent:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/*row-2*/

.col-2 {
flex-grow:  1;
}

Код: Выделить всё

Invertébrés


Écrevisses naines


Lots Mixtes


Plantes



Matériel


Accessoires


Chauffage


Distributeur de nourriture


Éclairage


Accessoires


Elevage


Engrais


Entretien


Filtration


Kit CO2


Nourriture


Sols


Traitements



Aquariums


Aquael


Juwel


Nos Packs





[img]img/Crevettes-Blue-Velvet.png[/img]

[img]img/Crevettes-Bloody-Mary.png[/img]

[img]img/Crevettes-Rili-Carbon.png[/img]

<
>



NOS COUPS DE COEUR

Я ожидаю полезной помощи, я только начинаю писать код< /п>

Подробнее здесь: https://stackoverflow.com/questions/784 ... slidershow