スライダー3つ横並び画像サイズ固定

レスポンシブ無し

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>
<div id="main_visual">
	<div class="main_visual_in">
		<div><img src="http://placehold.jp/cc9999/333333/300x200.png"></div>
		<div><img src="http://placehold.jp/99cc99/333333/300x200.png"></div>
		</div>
</div>

SCSS

.slick-prev {
    left: calc((100vw - 300px) / 2);
    /*left: 15px;*/
    z-index: 100;
}
.slick-next {
    right: calc((100vw - 300px) / 2);
    /*right: 15px;*/
    z-index: 99;
}

JavaScript

$('.main_visual_in').slick({
		infinite: true,
		dots: true,
		pauseOnHover:true,
		arrows:true,
		autoplay:true,
		autoplaySpeed: 3000,
		slidesToShow: 1,
		centerMode: true,
		centerPadding: '0px',
		variableWidth : true,
		infinite: true
	});