bublik787,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* SLIDER POPULAR PRODUCT */
/* SLIDER POPULAR PRODUCT */
/* HEADER SLIDER */
.headerSliderContainer{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
}
.headerSliderContainer p{
width: 80.3%;
text-align: center;
font-size: 40px;
color: #FFFFFF;
background: #0112FF;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
/* SLIDER POPULAR PRODUCT */
/* SLIDER */
.sliderContainer{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 300px;
}
.slider{
max-width: 80%;
height: 300px;
overflow: hidden;
border: 2px outset #0112FF;
border-radius: 15px;
border-top-right-radius: 0;
border-top-left-radius: 0;
position: sticky;
transition: 1s;
}
.slider2{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
transition: all ease 0.4s;
transform: none;
}
.slide{
width: 294px;
height: 290px;
margin: 3px;
border: 2px outset #0112FF;
border-radius: 10px;
}
/* SLIDER POPULAR PRODUCT */
/* BUTTON */
.buttonTopMenuLeft, .buttonTopMenuRight{
width: 70px;
height: 71px;
border: none;
filter: brightness(40%);
}
.buttonTopMenuLeft:hover, .buttonTopMenuRight:hover{
filter: none;
cursor: pointer;
transition: filter ease-out 1s;
}
.buttonTopMenuLeft{
background: url('../images/sliderTopMenu/arrowLeft.png') no-repeat;
margin-right: 3px;
}
.buttonTopMenuRight{
background: url('../images/sliderTopMenu/arrowRight.png') no-repeat;
margin-left: 3px;
}
</style>
</head>
<body>
<div class="headerSliderContainer">
<p>ПОПУЛЯРНЫЕ ТОВАРЫ</p>
</div>
<div class="sliderContainer">
<button id="buttonTopMenuLeft" class="buttonTopMenuLeft">Left</button>
<div id="slider" class="slider">
<div id="slider2" class="slider2">
<div class="slide">
<img src="#" alt="">
<div class="productName">1</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">2</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">3</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">4</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">5</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">6</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">7</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">8</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">9</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">10</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">11</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">12</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">13</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">14</div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName">15</div>
<button class="buy">В КОРЗИНУ</button>
</div>
</div><!-- slider2 -->
</div><!-- slider -->
<button id="buttonTopMenuRight" class="buttonTopMenuRight">Right</button>
</div><!-- sliderContainer -->
<script>
(function() {
let divs = document.getElementsByClassName('slide'), len = divs.length, index = 0, max = len - 1;
let slider = document.getElementById('slider2');
document.getElementById('buttonTopMenuLeft').onclick = moveLeft;
function moveLeft() {
index = Math.min(++index, max);
let left = divs[index].offsetLeft;
let x = Math.min(left, slider.scrollWidth - slider.clientWidth);
if(x != left) max = index;
slider.style.transform = `translateX(${-x}px)`;
}
document.getElementById('buttonTopMenuRight').onclick = moveRight;
function moveRight() {
index = Math.max(--index, 0);
let left = divs[index].offsetLeft;
slider.style.transform = `translateX(${-left}px)`;
}
window.onresize = function() {
max = len - 1;
index = 0
slider.style.transform = `translateX(0px)`;
}
})()
</script>
</body>
</html>