0xD34F

.slick-dots li > button {
  width: 8px;
  height: 8px;
}

.slick-dots li.slick-active > button {
  width: 20px;
  height: 20px;
}

.slick-dots li.slick-active + li > button {
  width: 14px;
  height: 14px;
}

<div class="preloader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

.circle {
  background: grey;
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: preloader 1s infinite linear;
}

.circle:nth-child(1) { animation-delay: 0s; }
.circle:nth-child(2) { animation-delay: 0.2s; }
.circle:nth-child(3) { animation-delay: 0.4s; }

@keyframes preloader {
  0%, 40% {
    background: grey;
  }
  20% {
    background: black;
  }
}

$('button.prev').click(function() {
  $('.slide:last').prependTo($('.slider'));
  $('.slider').css('margin-left', '-100%').animate({
    marginLeft: '+=100%'
  }, 500);
});

По умолчанию кнопки пусть будут красными (типа активные), а те, что расположены после активной перекрашиваете в синий (неактивные):

.slick-dots {
  li button {
    background-color: red;
  }

  li.slick-active ~ li button {
    background-color: blue;
  }
}

@keyframe

@keyframes

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

$('.nextArrow, .backArrow').on('animationend', e => e.target.style.animation = '');

На свойство компонента вешается наблюдатель, выполняющий обновление css-переменной. Например:

h1 {
  font-size: var(--h1-font-size);
}

<input v-model="fontSize" type="range">
<h1>hello, world!!</h1>

data: () => ({
  fontSize: 24,
}),
mounted() {
  this.$watch(
    'fontSize',
    val => this.$el.style.setProperty('--h1-font-size', `${val}px`),
    { immediate: true }
  );
},

:empty

display: inline-block; или white-space: nowrap; для li

.active .block {
  border: 1px solid red;
  color: red;
}

.active .under-box-text {
  display: none;
}

.active .invisible {
  display: block;
}

const itemSelector = '.wrapper';
const buttonSelector = '.block, .link';
const activeClass = 'active';

$(itemSelector).on('click', buttonSelector, e => {
  $(e.delegateTarget).toggleClass(activeClass);
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.querySelectorAll(buttonSelector).forEach(m => m.addEventListener('click', this));
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));

// или

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick(e) {
  const button = e.target.closest(buttonSelector);
  if (button) {
    this.classList.toggle(activeClass);
  }
}

// или

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  const item = button && button.closest(itemSelector);
  item && item.classList.toggle(activeClass);
});

.hidden {
  display: none;
}

const checkbox = document.querySelector('.block50 input');
const block = document.querySelector('.block83');
const onChange = e => block.classList.toggle('hidden', !e.target.checked);
checkbox.addEventListener('change', onChange);

UPD. Вынесено из комментариев:

список скрывается только после того, когда поставишь и уберешь галочку

Добавляем класс элементу:

<div class="block83 hidden">

Или отправляем ему событие change, чтобы обработчик сработал и класс добавил:

checkbox.dispatchEvent(new Event('change'));

UPD. Наконец-то дождались, теперь js тут использовать не обязательно:

body:not(:has(.block50 :checked)) .block83 {
  display: none;
}

Добавьте + перед .float. Чтобы стало так:

main .nav #open:hover + .float {

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

footer {
  flex: 1;
}

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

Тут могут помочь order и ~:

<div class="container">
  <img class="center" src="...">
  <img class="left" src="...">
  <img class="right" src="...">
</div>

.container {
  display: flex;
}

.center {
  order: 2;
}
.left {
  order: 1;
  visibility: hidden;
}
.right {
  order: 3;
  visibility: hidden;
}

.center:hover ~ .left,
.center:hover ~ .right {
  visibility: visible;
}

https://jsfiddle.net/561pc9gr/

.text::after {
  content: '';
  position: absolute;
  left: 23px;
  top: -10px;
  width: 16px;
  height: 16px;
  background: #f2fbff;
  border: 1px solid transparent;
  border-top-color: #cfcfcf;
  border-left-color: #cfcfcf;
  transform: rotate(45deg);
}

<div id="images">
  <img src="https://placehold.co/200x200/FF0000/FFFFFF/png">
  <img src="https://placehold.co/200x200/00FF00/000000/png">
  <img src="https://placehold.co/200x200/0000FF/FFFFFF/png">
</div>

#images img {
  transition: transform 0.7s;
}

Зациклить анимацию разворота можно через js:

.rotate {
  transform: rotateY(180deg);
}

const toggleRotate = el => el.classList.toggle('rotate');

document.querySelectorAll('#images img').forEach((n, i) => {
  setTimeout(setInterval, 300 * i, toggleRotate, 2000, n);
});

Или через css:

#images img {
  animation: rotate 4s infinite;
}

#images img:nth-child(1) { animation-delay:   0s; }
#images img:nth-child(2) { animation-delay: 0.3s; }
#images img:nth-child(3) { animation-delay: 0.6s; }

@keyframes rotate {
  0%, 75%, 100% {
    transform: rotateY(0deg);
  }
  25%, 50% {
    transform: rotateY(180deg);
  }
}

https://jsfiddle.net/Lys6g9za/

const itemSelector = '.parent';
const className = 'xxx';

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('mouseenter', onHover);
  n.addEventListener('mouseleave', onHover);
});

function onHover(e) {
  const state = e.type === 'mouseenter';
  for (
    let el = this;
    (el = el.nextElementSibling) && !el.matches(itemSelector);
    el.classList.toggle(className, state)
  ) ;
}

Если только через css - придётся дополнительно стилизовать элементы после следующего .parent, чтобы создать видимость, будто бы стили не применялись:

.parent:hover ~ .child {
  ...
}

.parent:hover ~ .parent ~ .child {
  ...
}

Вместо .slick-current стилизовать .slick-center.

https://jsfiddle.net/g2z7931f/