slickでcurrentを右側にしたい

Question

slickを使ったギャラリーを作成しています。
2つパターンがあり

A-B-C
のギャラリーはAをハイライト表示にしたいので、
variableWidth: true
を追加して実現できました。

D-E-F
のギャラリーはFをハイライトにしたいのですが、
currentが右側になるようにするにはどうしたら良いでしょうか？

よろしくお願いします。

<script>
$("document").ready(function(){
	$(".slider01").slick({
        infinite: true,
		arrows: true,
		autoplay: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        variableWidth: true
	});
	$(".slider02").slick({
        infinite: true,
		arrows: true,
		autoplay: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        variableWidth: true
	});
}); 
</script>
<style type="text/css">
<!--
	.slick-slide {
		margin: 1px;
		opacity: .35;
	}
	.slick-current {
		opacity: 1;
	}
-->
</style>

<div class="rotate01">
  <div class="slider01">
    <div><img src="A.jpg"></div>
    <div><img src="B.jpg"></div>
    <div><img src="C.jpg"></div>
  </div>
</div>
<div class="rotate02">
  <div class="slider02">
    <div><img src="D.jpg"></div>
    <div><img src="E.jpg"></div>
    <div><img src="F.jpg"></div>
  </div>
</div>

rotate01はAがcurrent（成功）
rotate02はFをcurrentにしたいのです。

Comments

[s8_chu]

質問者さんが記述したコードを追記していただけませんか？

[sweeet.biz]

説明不足ですみません、コードを記載しました。よろしくお願いします。

Answer 1

最初のスライドを指定したいのであれば、initialSlide を 2 にしてください。

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/

initialSlide
integer
0
Slide to start on

---

右端のスライドを「current」にするなら、rtl: true で右端にはなります。（並び順自体が変わるので、要素自体を逆順にする必要があるかもしれませんが）

動くサンプル：https://jsfiddle.net/7qsz4fs7/

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/

rtl
boolean
false
Change the slider's direction to become right-to-left

【Slick.jsのオプションrtlについて -jQuery初心者です。カルーセルスラ- JavaScript | 教えて!goo】
https://oshiete.goo.ne.jp/qa/9132474.html

Comments

[sweeet.biz]

ありがとうございます！
rtl: true　で無事解決しました！