Dino Winchester

Как отключить инициирование свайпера если слайдов меньше чем нужно для показа?

const swiper = new Swiper(".slider", { init: false });

const slider = document.querySelector(".slider");
const sliderSlides = slider.querySelectorAll(".swiper-slide");

sliderSlides.length > 3 ? swiper.init() : false;

Если это касается именно Swiper, то решается это дело без !important и других лишних действий. Достаточно указать для кнопок управления слайдером кастомные селекторы и назначить нужные стили:

new Swiper('.swiper', {
  navigation: {
    nextEl: '.my-awesome-slider-button-next',
    prevEl: '.my-awesome-slider-button-prev',
  },
});

.my-awesome-slider-button-prev { /* ...styles */ };
.my-awesome-slider-button-next { /* ...styles */ };

У Swiper хорошая и богатая документация, в которой можно найти параметр Breakpoints. Так вот, через Breakpoints можно менять многие свойства Swiper, в том числе количество отображаемых слайдов.

Пример:

const swiper = new Swiper('.swiper', {
      breakpoints: {
        640: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 4,
        },
        1024: {
          slidesPerView: 5,
        },
      }
    });

Как поменять цвет активного буллита

.swiper-pagination-bullets .swiper-pagination-bullet-active {
// стили для активного буллета
}

и как их все вместе немного сдвинуть вниз

Добавить определенные стили для элемента .swiper-pagination-bullets. Например margin-top или если блок с буллетами имеет абсолютное позиционирование, тогда использовать свойство top.