document.getElementById('slider-left').onclick = sliderLeft;
document.getElementById('slider-right').onclick = sliderRight;
var left = 0;
var polosa = document.getElementById('polosa');
function sliderLeft() {
left = left - 128;
if (left < -512) {
left = 0;
}
polosa.style.left = left + 'px';
}
function sliderRight() {
left = left + 128;
if (left > 0) {
left = -512;
}
polosa.style.left = left + 'px';
}
.slider__content {
position: relative;
width: 500px;
margin: 0 auto;
}
.slider {
width: 128px;
height: 128px;
border: 5px solid green;
margin: 50px auto;
overflow: hidden;
}
.polosa {
background: pink;
width: 896px;
position: relative;
transition: all .5s;
left: 0;
}
.polosa img {
float: left;
}
.polosa::after {
content: '';
display: block;
clear: both;
}
button {
position: absolute;
background-color: pink;
outline: none;
padding: 8px 0;
border-radius: 6px;
font-size: 18px;
font-weight: 600;
border: 4px solid green;
cursor: pointer;
top: 36%;
width: 80px;
}
.left {
left: 23%;
}
.right {
right: 23%;
}
<div class="slider__content">
<div class="slider" id="slider">
<div class="polosa" id="polosa">
<img src="http://download.seaicons.com/icons/mattahan/ultrabuuf/128/Comics-Hulk-Fist-icon.png" alt="">
<img src="http://download.seaicons.com/icons/mattahan/ultrabuuf/128/Comics-Ironman-Red-icon.png" alt="">
<img src="http://download.seaicons.com/icons/mattahan/ultrabuuf/128/Comics-Ironman-Hand-icon.png" alt="">
<img src="http://icons.iconarchive.com/icons/mattahan/ultrabuuf/128/TV-Kitty-icon.png" alt="">
<img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/128/A_Young_Leo.png" alt="">
<img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/128/War_Machine.png" alt="">
<img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/128/Thor.png" alt="">
</div>
</div>
<button class="left" id="slider-left">Left</button>
<button class="right" id="slider-right">Right</button>
</div>
Как сделать так что бы изображения за слайдером убирались из потока, хочу применить display:none но как это реализовать в моем случае?
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
При установке расширения Firefox вместо иконки белое пространствоПоследняя версия Firefox 64
Есть форма, подскажите как организовать мультизагрузку при помощи fileupload , и чтобы фото отобразились в li + их можно было удалить по одному изображению...
Есть небольшой плавающий блок на сайте, который закрывается только кликом на крестикразметка следующая:
Подскажите как сделать что бы в input можно было вводить дробные (или целые) числа ( пример: 11 | 1