02.10.2020, 08:42
|
Интересующийся
|
|
Регистрация: 02.10.2020
Сообщений: 20
|
|
Как сделать этот слайдер автоматически скользящим?
(function () {
class Slider {
constructor(startIndex, element) {
this.startIndex = startIndex;
this.currentIndex = this.startIndex;
this.element = element;
this.slides = this.element.querySelectorAll(".slideshow-about__slide");
this.dots = this.element.querySelectorAll(".dot");
this.setActiveSlide();
this.next();
this.prev();
}
setActiveSlide() {
this.slides.forEach((item, index) => {
if (index === this.currentIndex) {
item.classList.add("active");
} else {
item.classList.remove("active");
}
});
}
setActiveDot() {
this.dots.forEach((item, index) => {
if (index === this.currentIndex) {
item.classList.add("active");
} else {
item.classList.remove("active");
}
});
}
next() {
let nextBtn = this.element.querySelector('[data-way="next"]');
nextBtn.addEventListener("click", () => {
if (this.currentIndex === this.slides.length - 1) {
this.currentIndex = 0;
} else {
this.currentIndex++;
}
this.setActiveSlide();
this.setActiveDot();
});
}
prev() {
let prevBtn = this.element.querySelector('[data-way="prev"]');
prevBtn.addEventListener("click", () => {
if (this.currentIndex === 0) {
this.currentIndex = this.slides.length - 1;
} else {
this.currentIndex--;
}
this.setActiveSlide();
this.setActiveDot();
});
}
}
let slideShow = document.querySelectorAll(".slideshow-about__slider");
slideShow.forEach((item) => {
new Slider(0, item);
});
setInterval(function () {
slideShow.next();
}, 1000);
})();
Функция setInterval не помогает. Поэтому, пожалуйста, если кто-нибудь может сказать мне, как сделать этот слайдер автоматически скользящим, я буду очень благодарен за это.
|
|
02.10.2020, 08:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
|
|
02.10.2020, 09:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
Сообщение от Sergey-web92
|
Как сделать этот слайдер автоматически скользящим?
|
строки 63 - 68 заменить на
slideShow.forEach((item) => {
item = new Slider(0, item);
setInterval(function () {
item.next();
}, 1000);
});
|
|
02.10.2020, 09:23
|
Интересующийся
|
|
Регистрация: 02.10.2020
Сообщений: 20
|
|
Сообщение от рони
|
строки 63 - 68 заменить на
slideShow.forEach((item) => {
item = new Slider(0, item);
setInterval(function () {
item.next();
}, 1000);
});
|
спасибо за ответ! но таким образом не работает бесконечная карусель. и картинки теперь перебираются рандомно, а не по порядку
|
|
02.10.2020, 09:47
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
Sergey-web92,
ок, надо менять логику, next и prev только для назначения клика, выносите строки 37 - 43 в отдельную функцию и замените строку item.next(); на данную функцию или смотрите примеры по ссылке выше.
|
|
02.10.2020, 09:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
Sergey-web92,
или так попробуйте
(function() {
class Slider {
constructor(startIndex, element) {
this.startIndex = startIndex;
this.currentIndex = this.startIndex;
this.element = element;
this.slides = this.element.querySelectorAll(".slideshow-about__slide");
this.dots = this.element.querySelectorAll(".dot");
this.setActiveSlide();
this.setActiveDot();
this.nextBtn = this.element.querySelector('[data-way="next"]');
this.nextBtn.addEventListener("click", this.next.bind(this));
this.prevBtn = this.element.querySelector('[data-way="prev"]');
this.prevBtn.addEventListener("click", this.prev.bind(this))
}
setActiveSlide() {
this.slides.forEach((item, index) => {
if (index === this.currentIndex) {
item.classList.add("active");
} else {
item.classList.remove("active");
}
});
}
setActiveDot() {
this.dots.forEach((item, index) => {
if (index === this.currentIndex) {
item.classList.add("active");
} else {
item.classList.remove("active");
}
});
}
next() {
if (this.currentIndex === this.slides.length - 1) {
this.currentIndex = 0;
} else {
this.currentIndex++;
}
this.setActiveSlide();
this.setActiveDot();
}
prev() {
if (this.currentIndex === 0) {
this.currentIndex = this.slides.length - 1;
} else {
this.currentIndex--;
}
this.setActiveSlide();
this.setActiveDot();
}
}
let slideShow = document.querySelectorAll(".slideshow-about__slider");
slideShow.forEach((item) => {
item = new Slider(0, item);
setInterval(function() {
item.next();
}, 1000);
});
})();
не получится сделайте макет
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Последний раз редактировалось рони, 02.10.2020 в 13:38.
|
|
02.10.2020, 11:38
|
Аспирант
|
|
Регистрация: 01.03.2013
Сообщений: 77
|
|
Сообщение от Sergey-web92
|
let slideShow = document.querySelectorAll(".slideshow-about__slider");
slideShow.forEach((item) => {
new Slider(0, item);
});
setInterval(function () {
slideShow.next();
}, 1000);
|
метод next() же у вас должен вызываться у слайдера, а не у html элемента.
не знаю, как у вас там хтмл структура сделана.
но, теоретически, тут должно быть как то так
let slides= document.querySelector(".slideshow-about__slider");
let slider = new Slider(0, slides);
setInterval(function () {
slider.next();
}, 1000);
|
|
02.10.2020, 11:39
|
Интересующийся
|
|
Регистрация: 02.10.2020
Сообщений: 20
|
|
Цитата:
|
не получится сделайте макет
|
<div class="slideshow-about__slider">
<div class="slider-about-wrapper">
<div class="slideshow-about__slide active"><img class="slideshow-about__img-wrapper" src="./src/img/about1.webp"
alt="about-one"></div>
<div class="slideshow-about__slide"><img class="slideshow-about__img-wrapper"
src="./src/img/about2.webp" alt="about-two">
</div>
<div class="slideshow-about__slide"><img class="slideshow-about__img-wrapper"
src="./src/img/about3.webp" alt="about-three">
</div>
<div class="slideshow-about__slide"><img class="slideshow-about__img-wrapper"
src="./src/img/about4.webp" alt="about-fourth">
</div>
<div class="slideshow-about__slide"><img class="slideshow-about__img-wrapper" src="./src/img/about5.webp"
alt="about-five">
</div>
<!-- ------ -->
<div class="slider-next-prev">
<div class="sliders__nav_prev" data-way="prev" id="prev-btn">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" fill="#fcf9f4" stroke="#fcf9f4"
viewBox="0 0 21 41" enable-background="new 0 0 21 41">
<polygon points="20.3,40.8 0,20.5 20.3,0.2 21,0.9 1.3,20.5 21,40.1 "></polygon>
</svg>
</div>
<div class="sliders__nav_next" data-way="next" id="next-btn">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" fill="#fcf9f4" stroke="#fcf9f4" transform="rotate(180)"
viewBox="0 0 21 41" enable-background="new 0 0 21 41">
<polygon points="20.3,40.8 0,20.5 20.3,0.2 21,0.9 1.3,20.5 21,40.1 "></polygon>
</svg>
</div>
</div>
<!-- =============== -->
<div class="dots-wrapper">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
всё же не работает последним Вашим способом прикрепляю html-файл
Последний раз редактировалось Sergey-web92, 02.10.2020 в 11:43.
|
|
02.10.2020, 12:04
|
Интересующийся
|
|
Регистрация: 02.10.2020
Сообщений: 20
|
|
Сообщение от NeoN
|
метод next() же у вас должен вызываться у слайдера, а не у html элемента.
не знаю, как у вас там хтмл структура сделана.
но, теоретически, тут должно быть как то так
let slides= document.querySelector(".slideshow-about__slider");
let slider = new Slider(0, slides);
setInterval(function () {
slider.next();
}, 1000);
|
спасибо за ответ, но у меня Ваш код не сработал
|
|
02.10.2020, 13:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
Сообщение от Sergey-web92
|
всё же не работает последним Вашим способом
|
пост #6 не указал this, строки 12 и 14.
и макет, это примерно так ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active{
background-color: #FF0000;
color: #FFFF33;
}
</style>
</head>
<body>
<div class="slideshow-about__slider">
<div class="slider-about-wrapper">
<div class="slideshow-about__slide active"><img class="slideshow-about__img-wrapper" src="./src/img/about1.webp"
alt="about-one"></div>
<div class="slideshow-about__slide"><img class="slideshow-about__img-wrapper"
src="./src/img/about2.webp" alt="about-two">
</div>
<div class="slideshow-about__slide"><img class="slideshow-about__img-wrapper"
src="./src/img/about3.webp" alt="about-three">
</div>
<div class="slideshow-about__slide"><img class="slideshow-about__img-wrapper"
src="./src/img/about4.webp" alt="about-fourth">
</div>
<div class="slideshow-about__slide"><img class="slideshow-about__img-wrapper" src="./src/img/about5.webp"
alt="about-five">
</div>
<!-- ------ -->
<div class="slider-next-prev">
<div class="sliders__nav_prev" data-way="prev" id="prev-btn">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" fill="#fcf9f4" stroke="#fcf9f4"
viewBox="0 0 21 41" enable-background="new 0 0 21 41">
<polygon points="20.3,40.8 0,20.5 20.3,0.2 21,0.9 1.3,20.5 21,40.1 "></polygon>
</svg>
</div>
<div class="sliders__nav_next" data-way="next" id="next-btn">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" fill="#fcf9f4" stroke="#fcf9f4" transform="rotate(180)"
viewBox="0 0 21 41" enable-background="new 0 0 21 41">
<polygon points="20.3,40.8 0,20.5 20.3,0.2 21,0.9 1.3,20.5 21,40.1 "></polygon>
</svg>
</div>
</div>
<!-- =============== -->
<div class="dots-wrapper">
<div class="dot active">1</div>
<div class="dot">2</div>
<div class="dot">3</div>
<div class="dot">4</div>
<div class="dot">5</div>
</div>
</div>
</div>
<script>
(function() {
class Slider {
constructor(startIndex, element) {
this.startIndex = startIndex;
this.currentIndex = this.startIndex;
this.element = element;
this.slides = this.element.querySelectorAll(".slideshow-about__slide");
this.dots = this.element.querySelectorAll(".dot");
this.setActiveSlide();
this.setActiveDot();
this.nextBtn = this.element.querySelector('[data-way="next"]');
this.nextBtn.addEventListener("click", this.next.bind(this));
this.prevBtn = this.element.querySelector('[data-way="prev"]');
this.prevBtn.addEventListener("click", this.prev.bind(this))
}
setActiveSlide() {
this.slides.forEach((item, index) => {
if (index === this.currentIndex) {
item.classList.add("active");
} else {
item.classList.remove("active");
}
});
}
setActiveDot() {
this.dots.forEach((item, index) => {
if (index === this.currentIndex) {
item.classList.add("active");
} else {
item.classList.remove("active");
}
});
}
next() {
if (this.currentIndex === this.slides.length - 1) {
this.currentIndex = 0;
} else {
this.currentIndex++;
}
this.setActiveSlide();
this.setActiveDot();
}
prev() {
if (this.currentIndex === 0) {
this.currentIndex = this.slides.length - 1;
} else {
this.currentIndex--;
}
this.setActiveSlide();
this.setActiveDot();
}
}
let slideShow = document.querySelectorAll(".slideshow-about__slider");
slideShow.forEach((item) => {
item = new Slider(0, item);
setInterval(function() {
item.next();
}, 1000);
});
})();
</script>
</body>
</html>
|
|
|
|