slick slider スライド要素が一つしかない場合

slick slider に関する質問です。
１ページの中に複数のsliderがあり、そのうちのひとつが一つの要素しかありません。
この一つだけの要素が自動的に右側に寄っていますが、左側に寄せたいです。
要素が一つだけの場合、sliderを外す、または左寄せにする方法を教えてください。
jsのif文を書きたいです。

---現在のjsは以下の通りです---

$(function () {
$('.slider).slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
centerMode: true,
centerPadding: "10%",
infinite: true,
});
});

---参考までにhtml---
上ブロックの<div class="slider">は複数あるため見た目に問題はありません。
下ブロックの<div class="slider">が中の<div class="flex">が１件だけなので画面右揃えになっていて左側に空白があります。
ページが全体的に左揃えなので違和感があり、左揃えにしたいです。


<div class="slider slick-initialized slick-slider">
  <div class="slick-list">
    <div class="slick-track">
      <div class="flex">
        <img>
        <p></p>
      </div>
      <div class="flex">
        <img>
        <p></p>
      </div>
      <div class="flex">
       <img>
       <p></p>
     </div>
    </div>
  </div>
</div>

<div class="slider slick-initialized slick-slider">
  <div class="slick-list">
    <div class="slick-track">
      <div class="flex">
        <img>
        <p></p>
      </div>
    </div>
  </div>
</div>

上ブロックは2つの<div class="flex">が画面中央に並んでいる状態です。（3つ目以降は10％チラ見え）

slicksliderのcssで class="slick-track" にあたっている下記のwidth と translate3d を外すと、下ブロックだけが左揃えになることがわかりました。
単純に外してしまうと後で<div class="flex">の要素が増えた時にスライダーが動かなくなってしまうのを防ぎたく、「3枚以上の場合はスライダーが動く」ような記述をしたいです。
（<div class="flex">が二つあれば余白がなくなると思うのでsliderは動いても動かなくてもいい）

<div class="slick-track" style="opacity: 1;width: 476px;transform: translate3d(238px, 0px, 0px);">

jimbe

2022/03/31 10:35

JavaScript でしょうか? そうであれば、 Java と JavaScript は異なるモノですので、タグを見直して頂けますでしょうか。

sayoko

2022/03/31 11:31

大変失礼いたしました。修正いたしました。

行動規範の内容に同意します

回答1件

試してないですが。

js
1$(function () {
2if($('.slider).length>1){
3$('.slider).slick({
4infinite: true,
5slidesToShow: 2,
6slidesToScroll: 1,
7centerMode: true,
8centerPadding: "10%",
9infinite: true,
10});
11}
12});