Вот содержимое script.js
function Slider(settings){
let slider = document.getElementById('slider-1');
let sliderContent = slider.getElementsByClassName('slider__content')[0];
let sliderItems = slider.getElementsByClassName('slider__item');
let sliderWidth = parseFloat(getComputedStyle(sliderContent).width);
let singleSlideWidth = 0;
let init = function(){
if(!settings.slidesToShow && !+settings.slidesToShow){
settings.slidesToShow = 1;
}
singleSlideWidth = sliderWidth/settings.slidesToShow;
};
for(let i = 0; i < sliderItems.length; i++){
sliderItems[i].style.width = singleSlideWidth + 'px';
sliderItems[i].style.left = (singleSlideWidth * i) + 'px';
}
init();
}
let s1 = new Slider({
sliderId: 'slider-1',
slidesToShow: '2',
infinite: false
});
вот index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider-1" class="slider">
<div class="slider__content">
<div class="slider__item">
<img src="img/3.jpeg" alt="slide">
</div>
<div class="slider__item">
<img src="img/4.jpeg" alt="slide">
</div>
<div class="slider__item">
<img src="img/5.jpeg" alt="slide">
</div>
</div>
<button class="slider-button slider-button__prev" data-slider="prev">prev</button>
<button class="slider-button slider-button__next" data-slider="next">next</button>
</div>
<script src="script.js"></script>
</body>
</html>
Ведь скрипты у меня лежит перед body, почему он не видит document? Просто мистика.
В скрипте вставил
window.load = function(){
}
и заработало.
Но мне все же не понятно, в чем причина?
Жду помощи.
