slick.jsで生成された要素の「transform: translate3d」が書き変わらない

Question

以下が、slick.jsから生成されたhtmlです。

<div class="slick-list draggable" style="padding: 0px 50px;">
	<div class="slick-track" style="opacity: 1; width: 200px; transform: translate3d(150px, 0px, 0px);">
		<div class="slick-slide slick-current slick-center" data-slick-index="0" aria-hidden="true" style="width: 100px; color: red;">
			・・・
		</div>
	</div>
</div>

.slick-trackの「transform: translate3d(150px, 0px, 0px);」を「transform: translate3d(0px, 0px, 0px);」と書き換えたいです。

書き換えのjsの記述

<script>
$(function () { 
	$('.slick-track').css('transform','translate3d(0px, 0px, 0px)');
});
</script>

transform以外のcssは消したり、書き換えたり、追加したり出来るのですが、transformの書き換えが出来ません。

何か、原因、記述方法などご教授頂きたいです。
よろしくお願い致します。

Answer 1

JavaScriptのコードを見る限り、<div class="slick-track"></div>のスタイルを操作するタイミングに問題があるようです。

$(function() { ... })の関数は、DOMが完全にロードされたタイミング(すべてのHTML要素にアクセスできるようになったタイミング)で実行されます。

その時点では、Slickが実行されていないので、Slickが生成する<div class="slick-track"></div>要素が存在せず、スタイル操作もできていないのだと思います。

Slickは「Slickの初期化が終わったタイミング」でinitイベントを発生します。
そのタイミングであれば、Slickが生成した要素の操作も可能です。

$(function() {
    $('.slider' /* Slickを適用する要素のセレクタ */)
        .on('init', function() { /* Slickの初期化が終わったタイミングの処理 */ })
        .slick()
});

補足

念の為ですが、slickによって生成されるHTML要素のうち、
div.slick-trackは「スライダーがスライドする」のを実現するための要素です。
div.slick-trackのtransform: translate3d(x,y,z)のスタイルのx値が平行移動の量であり、
このスタイルをSlickとは独立して操作すると、スライダーの挙動が意図しないものになるかもしれません。

Comments

[ryu_t]

ご丁寧に解説して頂きましてありがとうございます。
スタイルは適用出来ました。
また、スタイルを変更して挙動は特に問題なさそうでした。

[NozomuIkuta]

解決したようで良かったです。