struhovv

Во-первых, перестаньте заниматься некрофилией - актуальная версия swiper'а седьмая, а не третья.

Во-вторых:

swiper.on('slideChange', ({ activeIndex }) => {
  document.querySelectorAll('.points .point').forEach((n, i) => {
    n.classList.toggle('active', i === activeIndex);
  });
})

document.querySelector('.points').addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('point')) {
    swiper.slideTo([...t.parentNode.children].indexOf(t));
  }
});

А вообще, если пытаетесь реализовать кастомную пагинацию, то среди настроек swiper'а есть такие, которые предназначены как раз для этого:

pagination: {
  el: '.points',
  bulletClass: 'point',
  bulletActiveClass: 'active',
  renderBullet: (index, className) => `<div class="${className}">${index + 1}</div>`,
  clickable: true,
},

Попробуйте так:

function filterDiv(){
      var div = document.querySelectorAll('div');
      idSel = this.value;
      [].forEach.call(div, function(el){
        el.style.display=(idSel=="*"||idSel==el.id)?'block':'none';
      });
    };
$(document).ready(function(){
    filterDiv(); // Подразумеваем, что нужный option уже выбран и нам надо просто после загрузки страницы отфильтровать элементы.
    document.querySelector('select').onchange=filterDiv; // эта же функция "вешается на onChange.
});

Но, на мой взгляд, т.к. у вас есть php backend, то можно уже на уровне php кода не выводить ненужные div'ы. Ставить им сразу display:none.

Переписал немного ваш код: https://codepen.io/achernyavskiy/pen/XWJyvpv