Пытаюсь сделать меню с 3 картинками, чтобы при нажатии на стрелки вправо и влево картинки переключались. Есть предположение, что можно это сделать через массив, но не знаю как это реализовать на jQuery.
HTML
<div class="products">
<div id="productsPICS">
<div>
<img src="img/products/1.jpg">
</div>
<div>
<img src="img/products/2.jpg">
</div>
<div>
<img src="img/products/3.jpg">
</div>
</div>
<div id="leftButton" class="button">
<img src="img/icons/leftarrow.ico">
</div>
<div id="rightButton" class="button">
<img src="img/icons/rightarrow.ico">
</div>
</div>
CSS
.products {
position: relative;
text-align: center;
box-sizing: border-box;
width: 1000px;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
user-select: none;
}
#productsPICS {
height: 600px;
position: relative;
}
#productsPICS img {
width: 100%;
border: 0px;
border-radius: 5px;
opacity: 1;
}
#productsPICS div:nth-child(1) {
display: block;
}
#productsPICS div:nth-child(2) {
display: none;
}
#productsPICS div:nth-child(3) {
display: none;
}
.button {
position: absolute;
width: 45px;
aspect-ratio: 1;
border: 0px solid black;
border-radius: 5px;
display: flex;
align-items: center;
opacity: 0.5;
transition: opacity 150ms linear;
background-color: #fff;
top: 260px;
z-index: 2;
}
.button:hover {
opacity: 1;
cursor: pointer;
}
.button img {
width: 60%;
aspect-ratio: 1;
margin-left: auto;
margin-right: auto;
}
#leftButton {
left: 10px;
}
#rightButton {
right: 10px;
}
