Управление CSS свойством transform. Слайдер на transform
Делаю сайт на flexbox.
Код:
<div class="headerSliderContainer">Код:
/* SLIDER POPULAR PRODUCT */Код:
// SLIDER TOPВозникла проблема. Для слайдера свойство 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. Также пробовал вариант без счетчика... эффект такой же(только сдвиг на один первый слайд). Необходим вариант при котором каждое последующее нажатие вызывало бы сдвиг слайдера на один слайд. Помогите кто чем может |
bublik787,
сделайте макет Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
bublik787,
на всякий случай бесконечная карусель |
спасибо попробую. Но в целом хотелось бы на будущее знать как выходить из подобной ситуации
|
простейший слайдер кнопки управления
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>
|
| Часовой пояс GMT +3, время: 19:44. |