Доброе времени суток всем!
Пишу слайдер, но вот столкнулся с бедой, не могу привязать кнопки(dots) к слайдам.
Вызовы функции
prevSlide(dot, currentSlide, 'dot-active'); и nextSlide(dot, currentSlide, 'dot-active'); не работают
// Slider
const slider = () => {
const slide = document.querySelectorAll('.portfolio-item'),
dotsParent = document.querySelectorAll('.portfolio-dots'),
dot = document.querySelectorAll('.dot'),
slider = document.querySelector('.portfolio-content');
let currentSlide = 0,
interval;
const prevSlide = (elem, index, strClass) => {
elem[index].classList.remove(strClass);
};
const nextSlide = (elem, index, strClass) => {
elem[index].classList.add(strClass);
};
for (let i = 0; i < slide.length; i++) {
const dots = document.createElement('li');
dots.className = 'dot';
dotsParent[0].appendChild(dots);
}
const autoPlaySlide = () => {
prevSlide(slide, currentSlide, 'portfolio-item-active');
prevSlide(dot, currentSlide, 'dot-active');
currentSlide++;
if (currentSlide >= slide.length) {
currentSlide = 0;
}
nextSlide(slide, currentSlide, 'portfolio-item-active');
nextSlide(dot, currentSlide, 'dot-active');
};
const startSlide = (time = 3000) => {
interval = setInterval(autoPlaySlide, time);
};
const stopSlide = () => {
clearInterval(interval);
};
slider.addEventListener('click', (event) => {
event.preventDefault();
let target = event.target;
if (!target.matches('.portfolio-btn, .dot')) {
return;
}
prevSlide(slide, currentSlide, 'portfolio-item-active');
prevSlide(dot, currentSlide, 'dot-active');
if (target.matches('#arrow-right')) {
currentSlide++;
} else if (target.matches('#arrow-left')) {
currentSlide--;
} else if (target.matches('.dot')) {
dot.forEach((elem, index) => {
if (elem === target) {
currentSlide = index;
}
});
}
if (currentSlide >= slide.length) {
currentSlide = 0;
}
if (currentSlide < 0) {
currentSlide = slide.length - 1;
}
nextSlide(slide, currentSlide, 'portfolio-item-active');
nextSlide(dot, currentSlide, 'dot-active');
});
slider.addEventListener('mouseover', (event) => {
if (event.target.matches('.portfolio-btn') ||
event.target.matches('.dot')) {
stopSlide();
}
});
slider.addEventListener('mouseout', (event) => {
if (event.target.matches('.portfolio-btn') ||
event.target.matches('.dot')) {
startSlide();
}
});
startSlide(150000);
};
slider();
<ul class="portfolio-content" id="all-progects">
<li class="portfolio-item portfolio-item-active"><img src="images/portfilio/portfolio-01.jpg"
alt="portfolio"></li>
<li class="portfolio-item"><img src="images/portfilio/portfolio-04.jpg" alt="portfolio"></li>
<li class="portfolio-item"><img src="images/portfilio/portfolio-06.jpg" alt="portfolio"></li>
<li class="portfolio-item"><img src="images/portfilio/portfolio-07.jpg" alt="portfolio"></li>
<li class="portfolio-item"><img src="images/portfilio/portfolio-08.jpg" alt="portfolio"></li>
<li class="portfolio-item"><img src="images/portfilio/portfolio-10.jpg" alt="portfolio"></li>
<a href="#" class="portfolio-btn prev" id="arrow-left"></a>
<a href="#" class="portfolio-btn next" id="arrow-right"></a>
<ul class="portfolio-dots"></ul>
</ul>
.portfolio {
padding: 5rem 0; }
.portfolio-content {
position: relative;
height: 775px;
margin: 0 auto;
display: block; }
@media (max-width: 1024px) {
.portfolio-content {
height: 650px; } }
.portfolio-item {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease; }
.portfolio-item img {
height: auto;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.portfolio-item-active {
opacity: 1;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease; }
.portfolio-btn {
position: absolute;
cursor: pointer;
top: 50%;
z-index: 5;
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
background-repeat: no-repeat;
background-size: 34px;
border-radius: 50%;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease; }
.portfolio-btn.prev {
left: 20px;
background-image: url("../images/icons/left-arrow.svg");
background-position: 25% 50%; }
.portfolio-btn.next {
right: 20px;
background-image: url("../images/icons/right-arrow.svg");
background-position: 75% 50%; }
.portfolio-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease; }
.portfolio-dots {
position: absolute;
bottom: 20px;
width: 100%;
margin: 0 auto;
margin-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 5; }
.portfolio-dots .dot {
cursor: pointer;
height: 16px;
width: 16px;
margin: 0 10px;
border-radius: 50%;
border: solid #fff;
display: inline-block;
-webkit-transition: background-color, -webkit-transform 0.4s ease;
transition: background-color, -webkit-transform 0.4s ease;
transition: background-color, transform 0.4s ease;
transition: background-color, transform 0.4s ease, -webkit-transform 0.4s ease; }
.portfolio-dots .dot-active {
background-color: #19b5fe;
-webkit-transform: scale(1.2);
transform: scale(1.2); }
.portfolio-dots .dot:hover {
background-color: #53c6fe;
-webkit-transform: scale(1.2);
transform: scale(1.2); }
Подскажите в чем может быть проблема, что делаю не так...
