Alexander

Где-то примерно как-то так

$dropDowns.forEach((el) => {
  el.addEventListener("click", () => {
    const menu = el.querySelector('.dropdown_menu')
    if (menu.classList.contains('active')) {
      menu.classList.remove("active")
    } else {
      menu.classList.add("active")
      $dropMenus.forEach((element) => {
        if (element === menu) {
          return
        } else {
          element.classList.remove("active")
        } 
      });
    }
  });
});

Как реализован? Смотри в исходники:
https://github.com/nolimits4web/swiper

Реакт это не какой-то новый язык. Если чувствуете, что хотите его изучить, то не стоит загоняться, а просто берите и изучайте

Пробуй, у реакта есть документация на русском, там много интересной информации, которая поможет понять с чего начинать и как правильно им пользоваться.

https://ru.reactjs.org/docs/getting-started.html

так же как и в других каруселях — клонируйте часть слайдов. В данном случае один первый и помещайте его в конец.
после перехода на первый слайд (клон), прокручивайте панельку в начальное состояние, но без анимации, мгновенно.
Клонированные элементы можно отмечать атрибутами или классами.

Почему бы не взять уже готовый слайдер?

let dotContainer = document.querySelector('.slide_dots');
let dotList = [... this.slides].map(slide => {
  const dot = document.createElement('div');
  dot.classList.add('dot');
  dotContainer.appendChild(dot);
  return dot;
});
console.log( dotList );   //  [ <div></div>, <div></div>, <div></div>, ... ]

Дальше в массиве dotList будут ссылки на все элементы dot

Можно поглядеть как должно быть?!
И вы же сами их ограничили min-width: 370px;, поэтому при сужении они не сжимаются меньше или что-то я не понял?)

РЕШЕНИЕ:
1. В стилях прописываем желанный отступ у слайдов, например такой:

.post_item:not(:last-child) {
  margin-right: 20px;
}

2. Далее в js нужно добавить некоторые строки, сначала на 10 строке добавил переменную (имя можете своё), которая будет отвечать за отступ указанный в стилях. А точнее сразу в процентном соотношении.



3. Попробовал несколько способов, но пока работает только так, может вы найдете лучше применение. У функций переключения слайдов, добавил строку

this.offsetSlide = ((this.slides[1].offsetLeft - this.slides[0].offsetWidth)*100)/this.main.offsetWidth;

, то есть по клику на кнопки высчитываем процентное соотношение отступа. Пришлось добавить её и для кнопки назад и вперед (81 и 97 строки).

4. И последнее, этот процент добавляем к полученной ширине слайда в процентах (86 и 102 строки).



P.S: Найдете решение лучше, дайте знать. Всегда интересно поучится тому, что будет лучше))

Не проверял, но что-то типа:

document.addEventListener("DOMContentLoaded", function() {
  const filters = document.querySelectorAll("[data-filter]");

  Array.from(filters).forEach(filter => {
    filter.addEventListener("click", function(event) {
      event.preventDefault();

      const categoryName = filter.dataset["filter"];
      const categories = document.querySelectorAll("[data-cat]");

      if (categoryName === "all") {
        Array.from(categories).forEach(category =>
          category.classList.remove("hide")
        );
      } else {
        Array.from(categories).forEach(category => {
          const workCat = category.dataset["cat"];

          if (workCat !== categoryName) {
            category.classList.add("hide");
          } else {
            category.classList.remove("hide");
          }
        });
      }
    });
  });
});

You-Dont-Need-jQuery

Насоветовали тебе тут.. в целом конечно оно то и правда. Но если подумать?

Есть такие варианты:
Онлайн:
1. Форумы по веб программированию (старое не актуальное, но можно попробовать)
2. Группы в вк и там иногда есть общалки, типа форумов
3. Телеграмм чаты и возможно чаты в других каких-то мессенджерах мобильных (хз может есть)

Реальная жизнь:
1. Пойти на коворкинг
2. Устроиться в офис или на удаленку
3. Ходить по тематическим конференциям

Замутить свой какой-то движняк (проект) куда будут привлекаться веб разработчики:
1. Например группу в вк посвященную какому-то "PHP для студентов"
2. Свой блог
3. Писать поэзию на тему JavaScript и выкладывать на YouTube :)

Не факт что вышеописанное всё рабочее, но что-то обязательно сработает.
Еще и сам придумай что-нибудь

Успехов!

https://tympanus.net/codrops/2013/06/25/nifty-moda...

варианты на любой вкус и цвет.

let cat = this.dataset.filter;
или
let cat = this.getAttribute('data-filter');

https://github.com/nefe/You-Dont-Need-jQuery/blob/...

вам не нужен jQuery

// jQuery
$el.slideUp();
$el.slideDown();

// Нативно
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;