В общем, вот код адаптивного слайдера, но никак не могу подключить javascript
, помогите.
window.onload = function() {
//Слайдер сантехники
document.getElementById("slider_right").onclick = slidrerRight;
var a = 0
function slidrerRight() {
var polosa = document.getElementById("items");
a = a - 955;
if (a < -2865) {
a = 0
}
polosa.style.left = a + "px";
}
document.getElementById("slider_left").onclick = sliderLeft;
function sliderLeft() {
var polosa = document.getElementById('items');
a = a + 955;
if (a > 0) {
a = -2865
}
polosa.style.left = a + 'px';
}
}
//Это JavaScript для этого слайдера, но там я вообще ничего не понимаю.
var d = document;
var wrap = d.querySelector('.wrap');
var items = d.querySelector('.items');
var itemCount = d.querySelectorAll('.item').length;
var scroller = d.querySelector('.scroller');
var pos = 0;
var transform = Modernizr.prefixed('transform');
function setTransform() {
items.style[transform] = 'translate3d(' + (-pos *
items.offsetWidth) + 'px,0,0)';
}
function prev() {
pos = Math.max(pos - 1, 0);
setTransform();
}
function next() {
pos = Math.min(pos + 1, itemCount - 1);
setTransform();
}
window.addEventListener('resize', setTransform);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
display: flex;
align-items: stretch;
width: 65%;
margin: auto;
flex-direction: column;
}
button {
width: 30px;
border: none;
background: transparent;
/*прозрачность*/
font-size: 40px;
text-align: center;
outline: none;
opacity: 0.5;
transition: opacity 300ms ease-out;
cursor: pointer;
}
button:hover {
opacity: 1;
}
.slider {
display: flex;
flex-direction: row;
/**/
}
.scroller {
flex: 1;
overflow: hidden;
}
.items {
list-style-type: none;
white-space: nowrap;
transition: transform 1s ease-in-out;
}
.item {
padding: 30px 20px;
display: inline-block;
width: 100%;
height: 570px;
background-size: cover;
background-position: 50% 50%;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
<section id="galary" name="galary">
<div class="galar">
<span>Галерея наших работ</span>
</div>
<div class="wrap">
<div class="slider">
<button onclick="prev()">«</button>
<div class="scroller">
<ul class="items">
<li class="item" style="background-image: url(туалет.jpg)"></li>
<li class="item" style="background-image: url(раковина.jpg)"></li>
<li class="item" style="background-image: url(душ.jpg)"></li>
<li class="item" style="background-image: url(ванна.jpg)"></li>
</ul>
</div>
<button onclick="next()">»</button>
</div>
</div>
</section>