Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.10.2020, 08:42
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 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 не помогает. Поэтому, пожалуйста, если кто-нибудь может сказать мне, как сделать этот слайдер автоматически скользящим, я буду очень благодарен за это.
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2020, 08:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Sergey-web92,
бесконечная карусель
Ответить с цитированием
  #3 (permalink)  
Старый 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);
  });
Ответить с цитированием
  #4 (permalink)  
Старый 02.10.2020, 09:23
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 02.10.2020
Сообщений: 20

Сообщение от рони Посмотреть сообщение
строки 63 - 68 заменить на
slideShow.forEach((item) => {
  item = new Slider(0, item);
  setInterval(function () {
    item.next();
  }, 1000);
  });
спасибо за ответ! но таким образом не работает бесконечная карусель. и картинки теперь перебираются рандомно, а не по порядку
Ответить с цитированием
  #5 (permalink)  
Старый 02.10.2020, 09:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Sergey-web92,
ок, надо менять логику, next и prev только для назначения клика, выносите строки 37 - 43 в отдельную функцию и замените строку item.next(); на данную функцию или смотрите примеры по ссылке выше.
Ответить с цитированием
  #6 (permalink)  
Старый 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.
Ответить с цитированием
  #7 (permalink)  
Старый 02.10.2020, 11:38
Аспирант
Отправить личное сообщение для NeoN Посмотреть профиль Найти все сообщения от NeoN
 
Регистрация: 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);
Ответить с цитированием
  #8 (permalink)  
Старый 02.10.2020, 11:39
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 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.
Ответить с цитированием
  #9 (permalink)  
Старый 02.10.2020, 12:04
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 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);
спасибо за ответ, но у меня Ваш код не сработал
Ответить с цитированием
  #10 (permalink)  
Старый 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать обработку динамически созданной формы через ajax? Wimko AJAX и COMET 4 08.10.2019 16:37
Как поместить слайдер в модальное окно? ИщуПомощь Элементы интерфейса 2 24.08.2017 20:27
Как сделать слайдер с изменением контента Trisha Элементы интерфейса 1 11.04.2014 11:36
Пытаюсь сделать слайдер. Подскажите как скрыть стрелки в нем. umbabaraumba Элементы интерфейса 0 13.02.2014 20:26
как сделать чтобы калькулятор считал автоматически без нажатия на кнопку станислав123 Общие вопросы Javascript 1 14.12.2012 17:54