Олег Барабанов

На похожий вопрос я уже отвечал на stackoverflow, поэтому чтобы не дублировать просто дам ссылку на свой ответ c пояснением и примером кода.

В том примере, шрифт будет уменьшаться только в том случае, если он не влезает в блок, а в ином случае остается как есть по умолчанию. Если вам необходимо, чтобы шрифт также и увеличивался (т.е. совсем полностью подстраивался), то возможно этот чуть доработанный пример на codepen вам более подойдет.

Если вкратце, то текст в блоке оборачивается дополнительным контейнером с overflow: hidden под размер блока и враппером, который просто оборачивает текст. Взяв огромный размер шрифта (так, чтобы враппер переполнял контейнер) и затем уменьшая его, мы уменьшаем размеры враппера и как только этот враппер перестает переполнять контейнер - убираем все лишнее(и контейнер и враппер) и оставляем подобранный размер. Данный пример похож на тот, что упоминал Semantic.Moscow, с расчетом размера шрифта за счет overflow: scroll и снижения размера шрифта до тех пор, пока скролл не пропадет.

Решение не самое лучшее, но возможно оно вам поможет.

1) Что касательно JS - рекомендую обратить внимание на
Airbnb JavaScript style guide или на Google JavaScript Style Guide.
Код должен быть в одном стиле. Т.е. либо везде используете ; либо нигде.

2) Также от себя лично добавлю, старайтесь обозначать переменные по умолчанию как const. Если вам не хватает const потому что вам надо переназначать переменную - только тогда делайте let.

Немного модифицируем ваш пример

let a = 0 
let b = 1 
const b2 = '/4'
const slider = document.querySelector('.slider')
const buttonNext = document.querySelector('.buttonNext')
const buttonBack = document.querySelector('.buttonBack')
const counter = document.querySelector('#counter')

Благодаря const мы сразу видим, что переменные не будут переназначаться (т.е. readonly). Правильное использование const и let - важный элемент самодокументирования кода.

3) Что касается CSS - присмотритесь к Google HTML/CSS Style Guide
Например, в вашем случае порядок свойств в CSS классах не придерживается какого-либо порядка, поэтому читать такое неудобно. Сделайте по алфавиту (за исключением вендорных свойств). Этот пункт как-раз описан тут.
Естественно это не надо ручками делать - поэтому вам придется познакомиться с различными системами автоматического форматирования кода.

4) Именование в CSS классах должно быть единого стиля. У вас в коде есть и .buttonBack и .container-button - lowerCamelCase и CamelCase стиль в CSS использовать нежелательно.

Так-то еще много есть замечаний (вроде неосмысленных названий переменных и пр.) - но это уже перечислили выше. По большей части строго настроенные линтеры кода вам будут хорошими помощниками и укажут на подобные проблемы.

Раз уж указываете padding, то к .swiper-slide добавьте: box-sizing: border-box;
https://codepen.io/olegbarabanov/pen/zYzpVNa

Т.е. в вашем случае "элемент" это текущий выделенный элемент в структуре.
В этом "элементе" указаны стили, указанные в атрибуте style элемента, который выделен у вас слева.

canvas + небольшой скрипт, который делает шумы или что-то подобие соли тогда уж.
Если я конечно правильно понял вас.