Антон Усачев

Анимированные svg здесь излишни. Достаточно пары картинок и clip-path. А анимировать уже через css.

Набросал пример:

Все на чистом css можно.

Вариант на jq и regEx

$('.entry-content').find('p').each(function() {
    if($(this).is(':empty')) {
        $(this).remove();
    }
});

padding добавляется к a, что является неправильным подходом: браузер не видит вложенности в данном случае. Лучшим решением будет убрать padding у a и переставить его на вложенные ul. Например, так:

ul.usp {
	padding: 0;
	
	ul {
		padding-left: 20px;
	}
}

slidesPerView: 4
Я вижу на экране больше. Отсюда вывод, что каждый слайд содержит несколько элементов. Я прав? В таком случае есть вероятность, что свайпер не может поместить нужное количество слайдов в установленную ширину экрана. Может, есть смысл сделать отдельный слайд для каждого элемента? Ну, или увеличить количество дублируемых наборов:
loopAdditionalSlides: [число]

Ищем ссылки, содержащие текст (адрес ссылки или что там...) и прячем родительский ряд.

Если совсем просто, то так:

// $('[value=30]').prop('checked', true);
$('[value=' + val + ']').prop('checked', true);

Можно через transform для псевдоэлементов. Для достижения нужного наклона просто поиграться со значением skew.



Просто нужно держать в голове, что ширина псевдоэлементов должна быть равна углу наклона, а марджин половине этого значения (например,

width: 30%; transform: skewX(30deg); margin-left: -15%;

).

Как один из вариантов решения. Не самый удачный, но имеющий право на жизнь, по многочисленным просьбам продублирую в ответы.

.content_active {
    transform: translateX(calc(30% - 1px));
}

Гриды рулят!
Здесь просто вставлено изображение круга с "иконками", однако иконки можно расположить абсолютно на круге, тогда они не будут уменьшаться при сужении экрана.