Дерганый переход слайдов в Slick. Есть ли решение?

Question

[Евгений Литвинов]

.team__slider-character {
	display: flex;
	width: 100%;
	height: 160px;
	margin-top: 98px;
	& .slick-slider.slick-initialized {}
	& .slick-slider.slick-dotted {}
	& .slick-list {
		width: 500px;
		height: 160px;
		margin: 0 auto;
		overflow: hidden;
	}
		& .slick-track {
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 1920px;
			height: 160px;
			margin: 0 auto;
			&.slick-slide {
				min-width: 100px;
				min-height: 100px;
				transition: 300ms ease-out;
			}
			& .slick-active {
				transition: 300ms ease-out;
			}
			& .slick-current {}
			& .slick-center {
				width: 160px;
				height: 160px;
				transition: 300ms ease-out;
			}
			& .slick-cloned {}
		}
	& .slick-arrow {}
	& .slick-prev {}
	& .slick-next {}
	& .slick-disabled {}
	& .slick-dots {}
	& .slick-dots li {}
	& .slick-dots li.slick-active {}
	& .slick-dots li button {}
}
.avatar {
	width: 100px;
	height: 100px;
	max-width: 160px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.team__sophie-turner-copy {
	background-image: url(../img/SophieTurner.png);
}
.team__sophie-turner-one {
	background-image: url(../img/SophieTurner.png);
}
.team__sophie-turner-two {
	background-image: url(../img/SophieTurner.png);
}
.team__sophie-turner-three {
	background-image: url(../img/SophieTurner.png);
}

<section class="team">
			<div class="team__title"><h2 class="title">Our Team</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p></div>
			<div class="team__slider-character">
				<div class="avatar team__sophie-turner-one"></div>
				<div class="avatar team__sophie-turner-two"></div>
				<div class="avatar team__sophie-turner-three"></div>
				<div class="avatar team__sophie-turner-copy"></div>
			</div>
			<div class="team__slider-text"></div>
		</section>

$(document).ready(function() {
	$('.team__slider-character').slick({
		arrows:false,
		slidesToShow: 3,
		slidesToScroll: 3,
		dots: false,
		focusOnSelect: true,
		centerMode: true,
		centerPadding: '30px',
		variableWidth: true,
		variableHeight: true,
		infinite: true,
	})
});

Очень надоел slick, куча багов и недопонятков, застрял на том что не могу сделать плавный переход на следующий слайд, или вообще убрать lock на прокрутку (slidesToShow заблокирован centerMode'ом).

Прошу помочь советами по чистке кода и еще одной проблеме: как подключить lazy-load к before с background-image? Или же, например, сделать так что бы картинка не подгружалась каждый новый раз, буду очень признателен.

.testimonals__comments {
	& #JohnDoe:before {
		content: url(../img/doe.png);
		position: absolute;
		top: 47.5px;
		left: -110px;
	}
	& #Khalessi:before {
		content: url(../img/lessi.png);
		position: absolute;
		top: 47.5px;
		left: -110px;
	}
	& #Doe:before {
		content: url(../img/doe.png);
		position: absolute;
		top: 47.5px;
		left: -110px;
	}
	& #Lessi:before {
		content: url(../img/lessi.png);
		position: absolute;
		top: 47.5px;
		left: -110px;
	}
}
.comment {
	position: relative;
	width: 350px;
	height: 160px;
	padding: 28px 64px 32px 30px;
	border-radius: 5px;
	box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.15);
	background-color: #ffffff;
	& h3 {
		font-size: 18px;
		font-weight: bold;
		line-height: 1.39;
		color: #061e37;
		margin-bottom: 10px;
	}
	& p {
		line-height: 1.67;
		color: #78909c;
		font-style: italic;
	}
}
.testimonals__comments { // .slick-slider
	position: relative;
	& .slick-slider.slick-initialized {}
	& .slick-slider.slick-dotted {}
	& .slick-list {
		display: flex;
		width: 760px;
		max-height: 405px;
		flex: 1 1 60%;
		justify-content: flex-end;
		overflow: hidden;
		& 	.slick-track {
			display: flex;
			width: 650px;
			flex-direction: column;
			user-select: none;
			& .slick-slide {
			max-width: 650px;
			height: 160px;
			margin: 0 0 70px;
				& .slick-active {}
				& .slick-current {}
				& .slick-center {}
				& .slick-cloned {}
			}
		}
	}
	& .slick-arrow {
		position: relative;
		left: 50%;
		display: flex;
		font-size: 0;
		width: 25px;
		height: 15px;
		margin-left: 35px;
		cursor: pointer;
	}
	& .slick-prev {
		margin-bottom: 32px;
		background: url(../img/arrowUp.png) no-repeat center;
	}
	& .slick-next {
		margin-top: 17px;
		background: url(../img/arrowDown.png) no-repeat center;
	}
	& .slick-disabled {}
	& .slick-dots {}
	& .slick-dots li {}
	& .slick-dots li.slick-active {}
	& .slick-dots li button {}
}

$(document).ready(function() {
	$('.testimonals__comments').slick({
		arrows:true,
		vertical: true,
		verticalSwiping: true,
		slidesToShow: 2,
		lazyLoad: 'ondemand',
		variableHeight: false,
		infinite: true,
	});
});

Comments

[Виталий Першин]

Залейте рабочий пример в песочницу, ваш код так никто читать не будет.

[Евгений Литвинов]

Виталий Першин, тогда придется перезалив темы делать - в прошлый раз попросили, никто так и не ответил на вопрос