Swiper slider in tab - manipulation of slides with loading fetch json file.

_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

"use strict"

document.addEventListener('DOMContentLoaded', function(){

  let myImageSlider = new Swiper('.image-slider', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },

    touchRatio: 3,
    touchAngle: 45,
    grabCursor: true,
    spaceBetween: 5,
    slidesPerView: 1,
  }); //------- end new Swiper('.image-slider', { ---------

  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;
    }
  }

  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);
    }
  });

  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>"]);
  });

  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>");
  });

  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>");
  });
  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>"]);
  });

  // Tabs
  (function () {
    let tabBlocks = document.querySelectorAll('.tabBlock');
    let items = document.querySelectorAll('.tabs__item');
    items[0].classList.add('active');
    tabBlocks[0].classList.add('tabBlock_selected');
    items.forEach((item) => {
      item.addEventListener('click', function(e) {
        let hrf = item.getAttribute('data-href');
        tabBlocks.forEach((block) => {
          block.classList.remove('tabBlock_selected');
          if(block.getAttribute('id') === hrf){
            block.classList.add('tabBlock_selected');
          }
        });
      });
    });
  })(); //------- end Tabs ---------

}); //------- end document.addEventListener ---------

swiper-slider-1.pug

mixin swiper-slider-1 ()
  // START swiper-slider-1
  .swiper-slider-1&attributes(attributes)
    .title Слайдер Swiper
    .tabs
      ul.tabs__menu
        li.tabs__item.active(data-href="tab_1")
          | Первая вкладка
        li.tabs__item(data-href="tab_2")
          | Вторая вкладка
        li.tabs__item(data-href="tab_3")
          | Третья вкладка
      .tabs__area
        .tabBlock.tabBlock_selected#tab_1
          h2.tabBlock__title Заголовок 1
          .tabBlock__info
            p
              | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptates rem, dolorum vitae necessitatibus quo quae totam veniam blanditiis nemo reprehenderit ipsa, id ea voluptatibus minus laboriosam qui. Suscipit quasi inventore aliquam, sapiente tempora necessitatibus! Animi perferendis atque dolorum nulla velit nesciunt, ipsam corporis, nihil ut repellat quasi recusandae, pariatur.
        .tabBlock#tab_2
          h2.tabBlock__title Заголовок 2
          .tabBlock__info
            .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
                
            .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
                | Добавить еще слайдов
        .tabBlock#tab_3
          h2.tabBlock__title Заголовок 3
          .tabBlock__info
            p
              | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptates rem, dolorum vitae necessitatibus quo quae totam veniam blanditiis nemo reprehenderit ipsa, id ea voluptatibus minus laboriosam qui. Suscipit quasi inventore aliquam, sapiente tempora necessitatibus! Animi perferendis atque dolorum nulla velit nesciunt, ipsam corporis, nihil ut repellat quasi recusandae, pariatur.

  // END swiper-slider-1
  
  
  

swiper-slider-1.sass

//================= TEMPLATE: swiper-slider-1 =================
.swiper-slider-1
  overflow-x: hidden
  background-color: #bcbcbc
  max-width: 600px
  margin: 0 auto
  .title
    padding: 15px
    font-size: 30px
    font-weight: 700
    color: #f0f8ff
  .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

  .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

  .tabs
    &__menu
      position: relative
      overflow: hidden
      font-size: 0
      list-style: none
      background-color: green
    &__item
      display: inline-block
      width: calc(100% / 3)
      padding: 15px
      overflow: hidden
      font-size: 22px
      color: #fff
      text-align: center
      vertical-align: top
      cursor: pointer
    &__area
      position: relative
      overflow: hidden

  .tabBlock
    position: absolute
    top: 0
    left: 0
    z-index: 1
    padding: 15px
    background-color: #b5f2ea
    &__title
      margin-bottom: 20px
      font-size: 20px
      text-align: center
      transition: opacity .3s ease .3s, transform .6s ease .3s
      transform: translate(0, -200%)
    &__info
      visibility: hidden
      opacity: 0
      transition: opacity .3s ease 0s, transform .6s ease 0s
      transform: translate(0, -100%)
      p
        font-size: 13px
        color: green

  .tabBlock_selected
    position: relative
    z-index: 2
    .tabBlock__title,
    .tabBlock__info
      visibility: visible
      opacity: 1
      transform: translate(0, 0%)


//@media screen and (min-width: px)