Swiper - прогрессбар (свайпера), фракции и буллеты (кастомные), добавление слайдов в слайдер

_slides-for-more.json

{
	"images": [
		{
			"src": "img/test/image1.jpg",
			"alt": "Картинка1"
		},
		{
			"src": "img/test/image1.jpg",
			"alt": "Картинка2"
		},
		{
			"src": "img/test/image1.jpg",
			"alt": "Картинка3"
		},
		{
			"src": "img/test/image1.jpg",
			"alt": "Картинка4"
		},
		{
			"src": "img/test/image1.jpg",
			"alt": "Картинка5"
		},
		{
			"src": "img/test/image1.jpg",
			"alt": "Картинка6"
		},
		{
			"src": "img/test/image1.jpg",
			"alt": "Картинка7"
		}
	]
}

common.js

  (function () {
    // Слайдер с фракциями, буллетами, прогрессбаром.
    // Прогрессбар - свайпера.
    // Фракции и буллеты - кастомные.

    // Настройка слайдера
    let myImageSlider = new Swiper('.image-slider', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type: 'progressbar'
      },
      touchRatio: 3,
      touchAngle: 45,
      grabCursor: true,
      spaceBetween: 5,
      slidesPerView: 1,
    }); //------- end new Swiper('.image-slider', { ---------

    // Получаем элементы для фракции
    let mySliderAllSlides = document.querySelector('.image-slider__total');
    let mySliderCurrentSlide = document.querySelector('.image-slider__current');

    let imgSliderLength = null;

    let bullets = [];

    function getTotalSlidesNumber() {
      imgSliderLength = document.querySelectorAll('.image-slider__slide').length;
      mySliderAllSlides.innerHTML = imgSliderLength;
    }

    function createBullets() {
      document.querySelector('.image-slider__bullets').innerHTML = '';
      for(let i = 0; i < imgSliderLength; i++){
        let bullet = document.createElement('div');
        bullet.classList.add('image-slider__bullet');
        bullet.textContent = i + 1;
        document.querySelector('.image-slider__bullets').append(bullet);
      }
    }

    function doActiveBullet() {
      let allSlides = document.querySelectorAll('.image-slider__slide');
      bullets = document.querySelectorAll('.image-slider__bullet');
      for(let i = 0; i < bullets.length; i++){
        bullets[i].classList.remove('active');
      }
      for(let i = 0; i < allSlides.length; i++){
        if(allSlides[i].classList.contains('swiper-slide-active')){
          bullets[i].classList.add('active');
        }
      }
    }

    function createBulletsAndTotalSlidesNumber() {
      getTotalSlidesNumber();
      createBullets();
      doActiveBullet();
    }

    createBulletsAndTotalSlidesNumber();

    // Меняем номер текущего слайда во фракции и
    // активный буллет при листании слайдера.
    // .realIndex - находит индекс активного слайда
    // Так как при добавлении новых слайдов в начало слайдера
    // так же срабатывает событие slideChange, а потом уже
    // код на создание буллетов, то делаем проверку
    // на соответствие слайдов и буллетов, чтобы исключить ошибку.
    myImageSlider.on('slideChange', function () {

      let currentSlide = ++myImageSlider.realIndex;
      mySliderCurrentSlide.innerHTML = currentSlide;

      let slides = document.querySelectorAll('.image-slider__slide');
      bullets = document.querySelectorAll('.image-slider__bullet');

      if(slides.length === bullets.length){
        for(let i = 0; i < bullets.length; i++){
          bullets[i].classList.remove('active');
        }
        bullets[currentSlide - 1].classList.add('active');
      }

    });

    // Слушатель событий на буллеты вешаем через
    // слушатель для их родителя, чтобы количество
    // буллетов было актуальным.
    // Можно переделать на событие click для родителя,
    // и если event.target имеет класс .image-slider__bullet,
    // то находим его индекс и, соответственно,
    // myImageSlider.slideTo(индекс).
    let bulletsContainer = document.querySelector('.image-slider__bullets');
    bulletsContainer.addEventListener('mouseenter', function(e) {
      bullets.forEach((bullet, i) => {
        bullet.addEventListener('click', function(e) {
          myImageSlider.slideTo(i);
        });
      });
    });

    // Добавление слайдов с помощью fetch,
    // данные из .json файла

    let newSlidesArray = [];
    let slidesArrayToShow = [];
    let count = 0;
    let numberOfSlidesToShow = 3;
    let flag = false;
    let addBtn = document.querySelector('.buttonsBlock__button_append-3');

    function showSlides(e, arr) {
      e.preventDefault();
      if(arr.length >= count + numberOfSlidesToShow){
        slidesArrayToShow = arr.slice(count, count + numberOfSlidesToShow);
        myImageSlider.appendSlide(slidesArrayToShow);
        count += numberOfSlidesToShow;
        flag = true;
      } else {
        slidesArrayToShow = arr.slice(count);
        myImageSlider.appendSlide(slidesArrayToShow);
        addBtn.disabled = true;
        addBtn.classList.add('disable');
        flag = false;
      }
      createBulletsAndTotalSlidesNumber();
    }

    async function getSlides(e) {
      e.preventDefault();
      let response = await fetch('_slides-for-more.json', {
        method: 'GET'
      });

      if(response.ok){ // Если нет файла на сервере или связи, то alert('Ошибка загрузки');
        try { // Если файл json не валиден, то будет alert('Ошибка')
          let result = await response.json();
          for(let i = 0; i < result.images.length; i++){
            newSlidesArray.push(`<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='${result.images[i].src}' alt='${result.images[i].alt}'></div></div>`);
          }
          showSlides(e, newSlidesArray);
        } catch (e){
          alert('Ошибка'); // Поменять на ошибка загрузки
        }
      } else {
        alert('Ошибка загрузки');
      }
    } //------- end async function getSlides ---------

    addBtn.addEventListener('click', getSlides, {once: true});
    addBtn.addEventListener('click', function (e) {
      if(flag == true){
        showSlides(e, newSlidesArray);
      }
    });

    // Добавление в начало 2х слайдов
    document.querySelector('.buttonsBlock__button_prepend-2').addEventListener('click', function (e) {
      e.preventDefault();
      myImageSlider.prependSlide(["<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image2.jpg' alt='Картинка'></div></div>", "<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image2.jpg' alt='Картинка'></div></div>"]);
      createBulletsAndTotalSlidesNumber();
    });

    // Добавление в начало 1 слайда
    document.querySelector('.buttonsBlock__button_prepend-1').addEventListener('click', function (e) {
      e.preventDefault();
      myImageSlider.prependSlide("<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image3.jpg' alt='Картинка'></div></div>");
      createBulletsAndTotalSlidesNumber();
    });

    // Добавление в конец 1 слайда
    document.querySelector('.buttonsBlock__button_append-1').addEventListener('click', function (e) {
      e.preventDefault();
      myImageSlider.appendSlide("<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image4.jpg' alt='Картинка'></div></div>");
      createBulletsAndTotalSlidesNumber();
    });

    // Добавление в конец 2х слайдов
    document.querySelector('.buttonsBlock__button_append-2').addEventListener('click', function (e) {
      e.preventDefault();
      myImageSlider.appendSlide(["<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image5.jpg' alt='Картинка'></div></div>", "<div class='image-slider__slide swiper-slide'><div class='image-slider__image'><img src='img/test/image5.jpg' alt='Картинка'></div></div>"]);
      createBulletsAndTotalSlidesNumber();
    });

  })();

swiper-slider-1.pug

  .image-slider.swiper-container
    .image-slider__wrapper.swiper-wrapper
      .image-slider__slide.swiper-slide
        .image-slider__image
          img(src="img/test/image1.jpg" alt="Картинка")
      .image-slider__slide.swiper-slide
        .image-slider__image
          img(src="img/test/image2.jpg" alt="Картинка")
      .image-slider__slide.swiper-slide
        .image-slider__image
          img(src="img/test/image3.jpg" alt="Картинка")
      .image-slider__slide.swiper-slide
        .image-slider__image
          img(src="img/test/image4.jpg" alt="Картинка")
      .image-slider__slide.swiper-slide
        .image-slider__image
          img(src="img/test/image5.jpg" alt="Картинка")
    //- Добавляем, если нам нужны, стрелки управления
    .swiper-button-prev
    .swiper-button-next
    //- Добавляем, если нам нужна пагинация (в данном случае будет прогрессбар)
    .swiper-pagination
    
    //- Конструкция для вывода фракций
    .image-slider__fraction
      .image-slider__current 1
      .image-slider__sepparator /
      .image-slider__total 1
    //- Для вывода буллетов
    .image-slider__bullets
      
  .buttonsBlock
    button.buttonsBlock__button.buttonsBlock__button_prepend-2
      | Добавить в начало 2 слайда
    button.buttonsBlock__button.buttonsBlock__button_prepend-1
      | Добавить в начало слайд
    button.buttonsBlock__button.buttonsBlock__button_append-1
      | Добавить в конец слайда
    button.buttonsBlock__button.buttonsBlock__button_append-2
      | Добавить в конец 2 слайда
    button.buttonsBlock__button.buttonsBlock__button_append-3
      | Добавить еще слайдов
      
      

swiper-slider-1.sass

  .image-slider
    position: relative
    padding: 30px 0 70px
    overflow: hidden
    &__wrapper
      position: relative
    &__slide
      position: relative
    &__image
      position: relative
      width: 100%
      padding-top: calc(100% / 3 * 2)
      img
        position: absolute
        top: 0
        left: 0
        display: block
        width: 100%
        height: 100%
        object-fit: cover
        object-position: center
  .image-slider .swiper-button-prev::after,
  .image-slider .swiper-button-next::after
    font-size: 80px
    color: #fff
  .image-slider .swiper-button-prev::after
    margin-left: 50px
  .image-slider .swiper-button-next::after
    margin-right: 50px

  .image-slider__fraction
    display: flex
    flex-flow: row nowrap
    align-items: center
    justify-content: center
    padding-top: 10px
    color: green

  .image-slider__sepparator
    margin: 0 15px

  .image-slider__bullets
    display: flex
    flex-flow: row wrap
    align-items: center
    justify-content: center
    padding-top: 10px

  .image-slider__bullet
    width: 40px
    height: 40px
    margin: 0 10px 20px
    font-size: 16px
    font-weight: bold
    line-height: 40px
    color: red
    text-align: center
    background-color: grey
    border-radius: 50%
    opacity: .3

  .image-slider__bullet.active
    opacity: 1

  .buttonsBlock
    display: flex
    flex-flow: row nowrap
    justify-content: center
    font-size: 0
    &__button
      font-size: 16px
      color: #fff
      background-color: green
      border: 1px solid lightgreen
      outline: none
      &:not(:last-child)
        margin-right: 10px
      &:focus,
      &:active
        outline: none
    .disable
      background-color: red