Слайдер из любых элементов таплинка с помощью стандартного слайдера

Инструкция: https://www.youtube.com/watch?v=UABQYHlaEn4

Элемент для связи перед блоками, которые надо вставить в слайдер

<div class="to-slider">
</div>

Скрипт, который надо вставлять после всех элементов для слайдов

<script>
var slid = document.querySelectorAll('.to-slider')
  for (i=0; i<slid.length; i++) {
 var donor = slid[i].closest('.block-item').nextSibling
var el = document.querySelector('.slider-inner .slider-slide:nth-child('+[i+1]+') .picture-container')
el.classList.add('none-slider')
el.innerHTML = ''
   el.append(donor)                       

  }
 
</script>
  <style>
  .none-slider {
  background-image: none!important;
  padding-top:0px!important;
}
    .none-slider>div>div>div,.none-slider>div>div>a{position:relative;
pointer-events:all;z-index:3;}
.slider-slide {
      vertical-align: middle!important;
}
  </style>

Принцип тот же. Оберните любое количество блоков в секцию и в эту секцию добавьте блок

<div class="to-slider">
</div

Код, который нужно вставить в конец таплинка:

<script>
  class StandartSlider {
constructor (id,slider) {
  this.$elems = document.querySelectorAll(id)
  this.$slider = slider;
}
  init() {
  
  for (i=0; i<this.$elems.length; i++) {
 var donor = this.$elems[i].closest('.blocks-section')
var el = this.$slider.querySelector('.slider-slide:nth-child('+[i+1]+') .picture-container')
el.classList.add('none-slider')
el.innerHTML = ''
   el.append(donor)                        

  }
}
}
let s = new StandartSlider('.to-slider',document.querySelector('.block-slider'));
  s.init()


</script>
  <style>
  .none-slider {
  background-image: none!important;
  padding-top:0px!important;
}
    .none-slider>div>div>div,.none-slider>div>div>a{position:relative;
pointer-events:all;z-index:3;}
.slider-slide {
      vertical-align: middle!important;
}
  </style>

Пример работы: https://besttaplink.ru/p/d37a85/