Я новичок в кодировании и программировании, и я следил на Youtube на экранной записи программиста, делающего адаптивный слайдер миниатюр, используя HTML, CSS и Javascript. Я попал в точку, когда я пытаюсь заставить "0" отображаться в моей консоли, когда я щелкаю элементы управления для ползунка, но я не могу заставить элементы управления реагировать на мой курсор. Дело в том, что он работает, когда я помещаю сюда код, но не работает ни в одном из браузеров на моем компьютере. Я пробовал Google Chrome и Inte rnet Explorer. Я даже пытался обновить Notepad ++ и Google Chrome, но ничего не работает.
Может кто-нибудь сказать мне, почему это происходит? Мой код ниже.
const controls = document.querySelector(".artcontrols");
const container = document.querySelector(".thumbnailcontainer");
const allBox = container.children;
const containerWidth = container.offsetWidth;
const margin = 30;
var item = 0;
var totalItems = 0;
// item setup per slide
responsive = [{
breakPoint: {
width: 0,
item: 1
}
}, //if width greater than 0 (1 will item show)
{
breakPoint: {
width: 600,
item: 2
}
}, //if width greater than 600 (2 will item show)
{
breakPoint: {
width: 1000,
item: 6
}
} //if width greater than 1000 (4 will item show)
]
function load() {
for (let i = 0; i < responsive.length; i++) {
if (window.innerWidth > responsive[i].breakPoint.width) {
items = responsive[i].breakPoint.item
}
}
start();
}
function start() {
var totalItemsWidth = 0
for (let i = 0; i < allBox.length; i++) {
//width and margin setup of items
allBox[i].style.width = (containerWidth / items) - margin + "px";
allBox[i].style.margin = (margin / 2) + "px";
totalItemsWidth += containerWidth / items;
totalItems++;
}
//tumbnail-container width set up
container.style.width = totalItemsWidth + "px";
//slides controls number set up
const allSlides = Math.ceil(totalItems / items);
const ul = document.createElement("ul");
for (let i = 1; i <= allSlides; i++) {
const li = document.createElement("li");
li.id = i;
li.innerHTML = i;
li.setAttribute("onclick", "controlSlides(this)");
ul.appendChild(li);
if (i == 1) {
li.className = "active";
}
}
controls.appendChild(ul);
}
//when clicked numbers slide to next slide
function controlSlides(ele) {
//select controls children 'ul' element
const ul = controls.children;
//select ul children 'li' elements;
const li = ul[0].children;
//find who is now active
var active;
for (let i = 0; i < li.length; i++) {
if (li[i].className == "active") {
//find who is now active
active = i;
console.log(active)
}
}
}
window.onload = load();
* {
box-sizing: border-box;
}
.thumbnailslider {
width: 100%;
float: left;
overflow: hidden;
}
.thumbanilslider .thumbnailcontainer {
width: 100%;
float: left;
transition: margin 1s ease;
}
.thumbnailslider .artitem {
height: 175px;
background-color: grey;
line-height: 175px;
text-align: center;
font-size: 50px;
color: #ffffff;
float: left;
}
.thumbnailslider .artcontrols {
width: 100%;
float: left;
padding: 15px;
}
.thumbnailslider .artcontrols ul {
display: block;
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
.thumbnailslider .artcontrols ul li {
height: 35px;
width: 35px;
border: 1px solid #c3c3c3;
margin: 4px;
display: inline-block;
line-height: 33px;
cursor: pointer;
}
.thumbnailslider .artcontrols ul li.active {
background-color: green;
color: #ffffff;
}
</div>
<div class="thumbnailslider">
<div class="thumbnailcontainer">
<div class="artitem">
1
</div>
<div class="artitem">
2
</div>
<div class="artitem">
3
</div>
<div class="artitem">
4
</div>
<div class="artitem">
5
</div>
<div class="artitem">
6
</div>
<div class="artitem">
7
</div>
<div class="artitem">
8
</div>
<div class="artitem">
9
</div>
<div class="artitem">
10
</div>
</div>
<!-- Control Slides -->
<div class="artcontrols">
</div>
</div>
<script src="script.js"></script>