ver3.1.1.4にて、L3001（https://www.ec-cube.net/products/detail.php?product_id=1104）という無料のテンプレートをカスタマイズしております。
メインスライドショーを一番上に持って行き、横幅を広げて横いっぱいのスライドショーを作成中です。

理想はそれぞれの画像が横にぴったりくっついた状態でスライドさせることです。
（参考URL：http://gimmicklog.main.jp/jquery/549/　「CenterMode（中央寄せレスポンシブ）」）

しかし、なぜか謎の空白が画像の間で発生してしまいます。
スマートフォンのような小さな画面で確認をすると、きちんと画像がくっつき合ってスライドしていきます。

親要素の横幅の問題でしょうか…？
hiddenで切ってありますが関係ないのでしょうか…？

デベロッパーツールで調べると、
いつの間にかそれぞれの画像にwidth:1787pxが指定されておりました。
実際の画像の横幅は1640pxですが…自動的についてしまっているようです。


■slick
$('.main_visual').slick({
arrows: false,
dots:true,
centerMode: true, ←要素を中央寄せにしています
autoplay:true, ←自動再生ON
});

■html
<div class="container-fluid slide">　
<div id="main">

<div id="main_middle">
<div class="row">

<div class="main_visual col-xs-12">

<div class="item slick-slide">
<img src="画像1.jpg">
</div>

<div class="item slick-slide">
<img src="画像2.jpg">
</div>

<div class="item slick-slide">
<img src="画像3.jpg">
</div>

</div>

</div>
</div>
</div>
</div>

■css
.slick-slider {
position: relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}


element.style {
opacity: 1;
width: 12509px;
transform: translate3d(-7148px, 0px, 0px);
}
↑.slick-trackに対して付与されていたスタイル。自動的に出てくる。デベロッパーツールよりコピー。


※一番最初の行の.slideは試験的につけたものです。現在は何のcssもつけておりません。
※親要素にwidth:100%や、autoを付けても反応はありませんでした。
※画像URLは諸事情により割愛いたします。


まだまだ初心者で分からない事が多く、
提示している情報にも多くの不備がございましたら申し訳ございません。

何卒ご教示賜りたく、よろしくお願いいたします。