Делаю сайт на flexbox.
|
Код:
|
<div class="headerSliderContainer">
<p>ПОПУЛЯРНЫЕ ТОВАРЫ</p>
</div>
<div class="sliderContainer">
<button id="buttonTopMenuLeft" class="buttonTopMenuLeft"></button>
<div id="slider" class="slider">
<div id="slider2" class="slider2">
<div id="slide" class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
<div class="slide">
<img src="#" alt="">
<div class="productName"></div>
<button class="buy">В КОРЗИНУ</button>
</div>
</div><!-- slider2 -->
</div><!-- slider -->
<button id="buttonTopMenuRight" class="buttonTopMenuRight"></button>
</div><!-- sliderContainer --> |
|
Код:
|
/* 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;
}
.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;
} |
|
Код:
|
// SLIDER TOP
function Slider2WidthIF(){
let slideWidth = document.getElementsByClassName('slide');
let sliderAmout = slideWidth.length;
let slider2Width = sliderAmout * 300 + 'px';
if (width < 460) {
slider2Width = sliderAmout * 200 + 'px';
}
function Slider2Width() {
let slider2 = document.getElementById('slider2');
slider2.style.width = slider2Width;
}
Slider2Width();
document.getElementById('buttonTopMenuLeft').onclick = buttonTopMenuLeft;
function buttonTopMenuLeft() {
let slider2 = document.getElementById('slider2');
let j = 0;
for(let i = 1; i <= sliderAmout; i++) {
j = j - 300;
let k = j + 'px';
slider2.style.transform = `translateX(${k})`;
return slider2.style.transform; break;
}
}
}
Slider2WidthIF(); |
Возникла проблема. Для слайдера свойство left не работает. Нашел выход использовать свойство transform. Но возникла другая загвоздка: transform срабатывает только один раз. Пробовал привязать к нему счетчик
document.getElementById('buttonTopMenuLeft').onclick = buttonTopMenuLeft;
function buttonTopMenuLeft() {
let slider2 = document.getElementById('slider2');
let j = 0;
for(let i = 1; i <= sliderAmout; i++) {
j = j - 300;
let k = j + 'px';
slider2.style.transform = `translateX(${k})`;
return slider2.style.transform; break;
}
}
и другие подобные варианты. Но оказалось, что сначала он считает j, а потом применяет его к transform. Также пробовал вариант без счетчика... эффект такой же(только сдвиг на один первый слайд). Необходим вариант при котором каждое последующее нажатие вызывало бы сдвиг слайдера на один слайд. Помогите кто чем может
